时间戳

首页 > 解决方案 > 如何附加以编程方式创建的 Web 组件？

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

问题描述

我创建了一个 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。我正在开发 Chromium 版本 70.0.3538.67（官方构建）在 Ubuntu 上构建，在 Ubuntu 16.04（64 位）上运行

标签： web-componentappendchildcustom-element

解决方案

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

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

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

该new语法也适用：

document.body.appendChild( new Resize_Div )

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

推荐阅读