我是网络开发的新手,最近我看到很多关于自定义元素 v1 的辩论和讨论。它们允许您使用自己的自定义行为定义自己的元素,如果使用 Shadow DOM,还可以使用范围样式。
当我在this了解它的时候网站,我不理解“自定义元素 react ”下的表格。谁能解释一下使用“构造函数”和“connectedCallback”以及术语“创建或升级”和“插入 DOM”之间的区别?
关于额外信息,我的自定义元素的定义在一个单独的文件中,它使用影子 DOM。我使用 HTML Import 将元素的定义导入到主文档中。
最佳答案
正如 Juvian 在评论中所说:
constructor()
在创建元素时被调用。connectedCallback()
在元素附加到 DOM 时(之后)被调用。
constructor()
调用不特定于自定义元素,它发生在任何对象创建(通常使用 new
运算符创建),而不仅仅是 HTML 元素。
在 constructor()
调用中,您可以创建 Shadow DOM,但不能在普通 DOM 中添加节点,也不能添加或设置属性。
关于升级:
升级 发生在随后定义 HTML 代码中声明的未知标记时(通过 customElements.define()
方法)。 “未知”元素成为“自定义”元素。然后调用 constructor()
和 connectedCallback()
方法。
注意:当一个元素被创建(未知),然后被定义时,它只有在附加时才会升级。
class CE extends HTMLElement {
constructor() {
super()
console.info( 'constructed' )
}
connectedCallback() {
console.info( 'connected' )
this.innerHTML = 'Hello' //can't be set in constructor()
}
}
B1.onclick = function () {
ce = document.createElement( 'c-e' )
ce.textContent = 'unknown'
}
B2.onclick = function () {
document.body.appendChild( ce )
}
B3.onclick = function () {
customElements.define( 'c-e', CE)
}
<button id=B1>create</button>
<button id=B2>attach</button>
<button id=B3>define</button>
用上面的代码片段尝试不同的组合:
- 然后运行:1 创建 - 2 附加 - 3 定义
- 然后运行:1 创建 - 2 定义 - 3 附加
- 然后运行:1 定义 - 2 创建 - 3 附加
关于javascript - 自定义元素v1中constructor和connectedCallback的区别,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40492330/