自定义元素v1中构造函数和connectedCallback之间的区别

Question

我是网络开发的新手,最近我看到很多关于Custom Elements v1的辩论和讨论.它们允许您使用自己的自定义行为定义自己的元素,如果使用Shadow DOM,则使用范围样式.

当我在这个网站上了解它时,我不理解"自定义元素反应"下的表格.任何人都可以解释使用"构造函数"和"connectedCallback"以及术语"创建或升级"和"插入DOM"之间的区别吗？

有关额外信息,我的自定义元素的定义位于单独的文件中,它使用shadow DOM.我使用HTML Import将元素的定义导入主文档.

Answer 1

正如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附加