问题描述
限时送ChatGPT账号..我创建了一个 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屋!
更多推荐
[db:关键词]
发布评论