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


Difference between constructor and connectedCallback in custom elements v1

我是Web开发的新手，最近我看到了很多有关Custom Elements v1的辩论和话题。它们允许您使用自己的自定义行为以及如果使用Shadow DOM和范围样式定义自己的元素。
当我在此站点上学习此功能时，我不理解"自定义元素反应"下的表格。谁能解释使用"构造函数"和" connectedCallback"以及"创建或升级"和"插入DOM"这两个术语之间的区别吗？
有关更多信息，我的自定义元素的定义在单独的文件中，并且使用影子DOM。我使用HTML导入将元素的定义导入到主文档中。

相关讨论

如Juvian在评论中所述：

  • 创建元素时调用constructor()。
  • connectedCallback()在元素附加到DOM时(之后)被调用。

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

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

关于升级：

如果随后定义了HTML代码中声明的未知标记(通过customElements.define()方法)，则会发生升级。 " unknown "元素变为" custom "元素。然后调用constructor()和connectedCallback()方法。

注意：创建(然后未知)元素然后进行定义时，仅在附加时才升级。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
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)  
}
1
2
3
<button id=B1>create</button>
<button id=B2>attach</button>
<button id=B3>define</button>

尝试使用以上代码段进行不同的组合：

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