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

Question

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

当我在this 网站上了解它时，我没有理解“自定义元素反应”下的表格。谁能解释使用“构造函数”和“connectedCallback”以及“创建或升级”和“插入 DOM”这两个术语之间的区别？

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

Answer 1

正如 Juvian 在 cmets 中所述：

• 当元素创建时调用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>

用上面的 sn-p 尝试不同的组合：

• 然后运行：1 创建 - 2 附加 - 3 定义
• 然后运行：1 创建 - 2 定义 - 3 附加
• 然后运行：1 定义 - 2 创建 - 3 附加