Question

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

当我在this网站上了解它时，我不理解＆＃34;自定义元素反应＆＃34;下的表格。任何人都可以解释使用＆＃34;构造函数＆＃34;和＆＃34; connectedCallback＆＃34;以及术语＆＃34;创建或升级＆＃34;和＆＃34;插入DOM＆＃34;？

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

Answer 1

正如Juvian在评论中所说：

创建时

constructor() 。
connectedCallback()。

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

在constructor()调用中，您可以创建Shadow DOM，但无法在普通DOM中添加节点，也无法添加或设置属性。

关于升级：

升级发生在HTML代码中声明的未知标记之后（通过customElements.define()方法）。＆＃34;未知＆＃34;元素成为＆＃34; custom＆＃34;元件。然后调用constructor()和connectedCallback()方法。

注意：创建元素（未知）然后定义时，仅在附加时才会升级。

＆＃13;

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)  
}

＆＃13;

<button id=B1>create</button>
<button id=B2>attach</button>
<button id=B3>define</button>

＆＃13;

尝试使用上述代码段的不同组合：

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

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

1 个答案: