自定义元素v1中constructor和connectedCallback的区别

Question

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

我在this站点学习的时候，没看懂"Custom element reactions"下的table。任何人都可以解释使用 "constructor" 和 "connectedCallback" 以及术语 "created or upgraded" 和 "inserted into the DOM" 之间的区别吗？

有关额外信息，我的自定义元素的定义在一个单独的文件中，它使用阴影 DOM。我使用 HTML Import 将元素的定义导入到主文档中。

Answer 1

正如 Juvian 在评论中所说：

constructor() 在 创建元素时调用 。
connectedCallback()。

constructor() 调用并不特定于自定义元素，它会在任何对象创建时发生（通常使用 new 运算符创建），而不仅仅是 HTML 元素。

在constructor()调用中，可以创建影子DOM，但是不能在普通DOM里面添加节点，也不能添加或设置属性之一。

关于升级:

升级发生在 HTML 代码中声明的未知标记随后被定义（通过 customElements.define() 方法）。 "unknown" 元素变为 "custom" 元素。然后调用 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 附加

自定义元素v1中constructor和connectedCallback的区别

Difference between constructor and connectedCallback in custom elements v1

javascript

html

web-component

shadow-dom

custom-element