如何附加以编程方式创建的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中测试，如<div is:'resize-div'> </div>，它工作正常。

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

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

浏览器开发人员工具使用outerHTML显示它创建如下：

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

如文档所述，“新元素[has]是一个属性，其值是自定义元素的标记名称。”

现在我设置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。我正在开发基于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属性为not added in the HTML code但它仍然充当自定义元素，并且outerHTML将返回带有is正确填充as explained in the specs的HTML。