如何附加以编程方式创建的 Web 组件？答案

【问题标题】：How do I append a Web Component created programmatically?如何附加以编程方式创建的 Web 组件？
【发布时间】：2019-02-15 22:55:02
【问题描述】：

我创建了一个Web Component类来扩展div，并使用customElements.define()来定义它：

class Resize_Div extends HTMLDivElement {
  constructor(){
      super();
      this.cpos = [0,0];
      <etc.>
  }
  connectedCallback() {
    console.log( 'connected' );
  }
  <etc.>
}

customElements.define('resize-div', Resize_Div, { extends:'div'} );

如果我在 html 中进行测试，如 <div is:'resize-div'> </div>，它可以正常工作。

现在我想使用 createElement 以编程方式创建一个实例，使用选项来声明 is，如文档中的 here:

let dv = document.createElement('ul', { is: 'resize-div' })

浏览器开发者工具显示它已创建，outerHTML如下：

outerHTML: "<div is="resize-div"></div>"

如文档所述，“新元素 [具有] is 属性，其值为自定义元素的标签名称。”

现在我设置 id、class 和 style，并通过以下方式将新元素附加到 DOM：

document.getElementById( parent ).appendChild( dv );

现在再看一遍：is 属性已被剥离，它不能用作 Web 组件：

attributes: NamedNodeMap
0: id
1: class
2: style
length: 3

已弃用的 registerElement here 的文档显示了一个使用 document.body.appendChild( new myTag() ) 的示例，但这已经过时了。

那么以编程方式创建 Web 组件并将其附加到文档的正确方法是什么？

（ps。我正在开发 Chromium 版本 70.0.3538.67（官方构建）在 Ubuntu 上构建，在 Ubuntu 16.04（64 位）上运行

【问题讨论】：

标签： web-component appendchild custom-element

【解决方案1】：

您已经定义了一个扩展的<div>，但您尝试创建一个<ul> 元素。

如果您创建一个<div>，它将起作用：

let dv = document.createElement('div', { is: 'resize-div' })

new 语法也适用：

document.body.appendChild( new Resize_Div )

注意：当您以编程方式创建自定义内置元素时，is 属性为 not added in the HTML code，但它仍充当自定义元素，outerHTML 将返回带有正确填充 is 的 HTML as explained in the specs .

【讨论】：

【解决方案2】：

您也可以创建没有此{is: 'tag'} 对象的元素。在某些情况下可能有用，也可能没用。

class MyElement extends HTMLElement {
  constructor() {
    super()
    const shadow = this.attachShadow({
      mode: 'open'
    })
    shadow.append(Object.assign(
      document.createElement('h1'), {
        textContent: 'Impossibru!'
      },
    ))
  }
}

customElements.define('my-custom-element', MyElement)
const el = document.createElement('my-custom-element')
document.body.append(el)

【讨论】：