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

Question

我创建了一个 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 中测试，as <div is:'resize-div'> </div>，它工作正常。

现在我想使用 createElement 以编程方式创建一个实例，使用声明is 的选项，如下所示：

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 的文档显示了一个使用 的示例document.body.appendChild( new myTag() )，但它已过时。

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

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

Answer 1

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

如果你创建一个，<div>它会起作用：

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

语法new也有效：

document.body.appendChild( new Resize_Div )

注意：当您以编程方式创建自定义内置元素时，该is属性不会添加到 HTML 代码中，但它仍然充当自定义元素，并且将返回正确填充的outerHTMLHTML，如规范中所述。is