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

Question

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

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

关于额外信息，我的自定义元素的定义在一个单独的文件中，它使用影子 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 附加