标签: custom-element

I\xe2\x80\x99m<select>使用本机 DOM（无 Polymer）编写自定义元素。

I\xe2\x80\x99m 尝试将我的元素与<label>元素一起使用，并在单击时正确触发我的元素的单击事件<label>，即：

<label>\n  My Select:\n  <my-select placeholder="Please select one">...</my-select>\n</label>\n

或者

<label for=\'mySelect1\'>My Select:</label>\n<my-select id=\'mySelect1\' placeholder="Please select one">...</my-select>\n

tabindex但是，即使我添加 a使其可聚焦，这种行为似乎也无法开箱即用。

这里\xe2\x80\x99是代码的精简版本和带有一些基本调试的JSFiddle ：

var MySelectOptionProto = Object.create(HTMLElement.prototype);\ndocument.registerElement(\'my-select-option\', {\n  prototype: MySelectOptionProto\n});\nvar MySelectProto = Object.create(HTMLElement.prototype);\n\nMySelectProto.createdCallback = function() {\n  if (!this.getAttribute(\'tabindex\')) {\n    this.setAttribute(\'tabindex\', 0);\n  }\n  \n  this.placeholder = document.createElement(\'span\');\n  this.placeholder.className = \'my-select-placeholder\';\n  this.appendChild(this.placeholder);\n\n  var selected = this.querySelector(\'my-select-option[selected]\');\n  \n  this.placeholder.textContent = selected\n    ? selected.textContent\n    : (this.getAttribute(\'placeholder\') || \'\');\n};\ndocument.registerElement(\'my-select\', …

我想在自定义元素内动态创建一个 CodeMirror 实例，并将其存在于元素的 Shadow DOM 内。例如：

<code-mirror>foo</code-mirror>
<script>
window.customElements.define('code-mirror', class extends HTMLElement {
    constructor() {
        super();
        let shadowRoot = this.attachShadow({mode: 'open'});
    }

    connectedCallback() {
        this.cm = CodeMirror(this.shadowRoot, {lineNumbers: true});
    }
});
</script>

这“有效”，但布局完全错误。左边距设置为窗口的宽度，行号显示不正确，并且选择逻辑垂直偏离了几行。

这是一个演示布局问题的 jsfiddle：链接

建议？

我们有主要的大型应用程序，并将使用不同的库（Angular、React 等）创建单独的小型应用程序（微服务），并将它们编译成 Web 组件以便在任何地方使用它们。主应用程序有一些库（例如 underscore.js），我们的一些组件使用相同的库（例如 lodash.js），在这种情况下，我们在主应用程序中使用 Web 组件时会看到很多冲突。您对如何隔离 Web 组件库以及它们可以在隔离模式下工作有什么想法吗？我们也使用了 ShadowDOM，但没有成功。

如果我创建两个自定义元素并在另一个元素内创建其中一个，则这些属性不适用于第一个元素的新子元素。

class Bar extends HTMLElement {
  constructor() {
    super();
    const val = this.getAttribute('val') || 'no value';

    const shadow = this.attachShadow({mode: 'open'});
    const wrapper = document.createElement('div');
    wrapper.innerHTML = `
      <div class='bar'>
      	<span>${val}</span>
      </div>
    `;

    shadow.appendChild(wrapper);
  }
}
customElements.define('x-bar', Bar);

class Foo extends HTMLElement {
  constructor() {
    super();
    const loop = this.getAttribute('loop') || 10;

    const shadow = this.attachShadow({mode: 'open'});
    const wrapper = document.createElement('div');
    
    for(let i=0; i<loop; i++){
    	const b = document.createElement('x-bar');
        b.setAttribute('val', `value #${i}`);
      
        wrapper.appendChild(b);
    }

    shadow.appendChild(wrapper);
  }
}
customElements.define('x-foo', Foo);

<x-foo …

我有一堂课叫QueryAddable

class QueryAddable extends HTMLElement {
  connectedCallback() {
    console.log('QueryAddable');
  }

它有几个扩展它的类，例如

class QueryGroup extends QueryAddable {
  constructor() {
    super();
  }
  connectedCallback() {
    console.log('QueryGroup');
  }

最好，如果我放在<query-group>页面上，我希望看到QueryAddable并QueryGroup登录控制台。我想这不会发生，因为我只<query-group>在页面上而不是<query-addable>.

我完全可以将一个方法放入QueryAddable被调用的方法中，onLoad并在每个扩展类的 中调用该方法connectedCallback，但为什么我必须在多个地方而不是一个地方执行此操作呢？

有没有办法让这两个connectedCallback函数都运行，或者是否设置为只有一个函数可以运行？

我正在尝试使用普通 js 创建 Web 自定义组件。我想使用 rxjs 和 observables 从我也使用 python 金字塔创建的 REST 端点获取 json 内容。但是，当我导入 rxjs 时会抛出错误 - 'TypeError: global is undefined'。

import 'https://unpkg.com/@reactivex/rxjs@6.0.0/dist/global/rxjs.umd.js';

也试过：

import 'https://cdnjs.cloudflare.com/ajax/libs/rxjs/6.5.2/rxjs.umd.js';

我想根本不使用 npm。

为什么我无法将自定义元素附加到另一个自定义元素？好吧，我可以，但结果是子元素现在被隐藏了。我不明白，因为我没有将它附加到父级的影子 DOM 或其他东西中。

https://jsfiddle.net/qehoLf8k/1/

超文本标记语言

<template id="text">
  <style>
    .text {
      color:red;
    }
  </style>
  <div class="text">Hello</div>
</template>

<template id="page">
  <style>
    :host {
      border:5px solid green;
      display: block;
      margin:20px;
      height:100px;
      width:100px;
    }
  </style>
  This is a page
</template>

<div id="my-body"></div>

JS

class Text extends HTMLElement {
    constructor(){
    super();
    this.attachShadow({mode: 'open'});
    const template = document.getElementById('text');
    const node = document.importNode(template.content, true);
    this.shadowRoot.appendChild(node);
  }
}
customElements.define('my-text', Text);

class Page extends HTMLElement {
    constructor(){
    super();
    this.attachShadow({mode: 'open'});
    const template = document.getElementById('page');
    const node = document.importNode(template.content, true); …

对于这个问题我还没有看到满意的答案。这基本上是这个问题的重复，但它关闭不当并且给出的答案不充分。

我提出了自己的解决方案，我将在下面发布。

这对于网页抓取很有用，或者在我的例子中，在处理自定义元素的 javascript 库上运行测试。我确保它生成我想要的输出，然后使用此函数来抓取给定测试输出的 HTML，并使用复制的 HTML 作为预期输出，以便将来与测试进行比较。

为了简单起见，我正在使用dom，我创建了一个text-area并注意到lt-mirror每当用户输入某些内容时就会生成一个标记的元素。新元素放置在 之前text-area。在网络上找不到任何有关它的文档？

我有一个用 Vue2 编写的应用程序，它还没有真正准备好升级到 Vue3。但是，我想开始在 Vue3 中编写一个组件库，并将组件导入回 Vue2，以便在准备就绪后最终进行升级。

Vue 3.2+ 引入了defineCustomElement它，它工作得很好，但是一旦我在附加到 Vue 实例的 Vue3 环境（例如 Quasar）中使用框架，它就会开始在 Vue2 应用程序中抛出错误，可能是因为尝试defineCustomElement(SomeComponent)使用框架中的某些内容的结果应该附加到应用程序中。

我考虑过扩展 HTMLElement 并安装应用程序connectedCallback，但随后我失去了反应性，必须手动处理所有 props/emits/.. ，如下所示：

class TestQuasarComponentCE extends HTMLElement {
  // get init props
  const prop1 = this.getAttribute('prop1')

  // handle changes
  // Mutation observer here probably...

  const app = createApp(TestQuasarComponent, { prop1 }).use(Quasar)
  
  app.mount(this)
}

customElements.define('test-quasar-component-ce', TestQuasarComponentCE);

所以最后的问题是 - 是否有可能以某种方式将其defineCustomElement与附加到应用程序的框架结合起来？