如何附加以编程方式创建的 Web 组件? [英] How do I append a Web Component created programmatically?

问题描述

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

class Resize_Div 扩展 HTMLDivElement {构造函数(){极好的();this.cpos = [0,0];<等>}连接回调(){console.log('连接');}<等>}customElements.define('resize-div', Resize_Div, { extends:'div'} );

如果我在 html 中测试，因为

，它工作正常.

现在我想使用 createElement 以编程方式创建实例，使用选项声明 is，如此处:

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

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

outerHTML: "
"

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

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

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

现在再看一遍:is 属性被剥离，它不能作为 Web 组件运行:

 属性:NamedNodeMap0:身份证1:类2:款式长度:3

已弃用的 registerElement 的文档此处显示一个使用 document.body.appendChild( new myTag() ) 的例子，但那已经过时了.

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

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

解决方案

你已经定义了一个扩展的

但你试图创建一个

> 元素.

如果你创建一个

，它会起作用:

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

new 语法也有效:

document.body.appendChild( new Resize_Div )

注意:当您以编程方式创建自定义内置元素时，is 属性为 未添加到 HTML 代码中 但它仍然充当自定义元素，并且 outerHTML 将返回 HTMLis 正确填充 as在规范中解释.

I created a Web Component class to extend div, and used customElements.define() to define it:

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'} );

If I test in html, as <div is:'resize-div'> </div>, it works fine.

Now I want to use createElement to create an instance programmatically, using the options to declare the is, as documented here:

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

The browser developer tools show it created, with outerHTML as below:

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

As documented, "The new element [has] an is attribute whose value is the custom element's tag name."

Now I set id, class, and style, and attach the new element to the DOM via:

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

Now look at it again: the is attribute is stripped off and it doesn't function as a Web Component:

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

The docs for the deprecated registerElement here show an example using document.body.appendChild( new myTag() ), but that's obsolete.

So what is the correct way to create a Web Component programmatically and attach it to a document?

(ps. I'm working on Chromium Version 70.0.3538.67 (Official Build) Built on Ubuntu, running on Ubuntu 16.04 (64-bit)

解决方案

You've defined an extended <div> but you try to create a <ul> element.

If you create a <div> instead it will work:

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

The new syntax also works:

document.body.appendChild( new Resize_Div )

NB: When you create an customized built-in element programmatically the is attribute is not added in the HTML code but it still acts as a custom element, and outerHTML will return the HTML with is correctly populated as explained in the specs.

这篇关于如何附加以编程方式创建的 Web 组件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！