Question

我创建了一个Web组件类来扩展 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' })

浏览器开发人员工具显示它是用HTML制作的，如下所示：

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

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

现在，我设置ID，类和样式，并通过以下方式将新元素附加到DOM：

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

现在再看一遍：是属性被剥夺，它不能用作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位）上运行

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将返回带有{{ 1}}正确填充了as explained in the specs。

Answer 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)

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

2 个答案: