Custom Elements（五）——Custom Elements 里的细节问题
在上一篇文章中，我们学习了如何使用 Custom Elements 创建自定义的 HTML 元素。在本文中，我们将讨论 Custom Elements 的一些细节问题。
组件的写法
Custom Elements 是由 JavaScript 和 HTML 元素组成的。下面是一个简单的 Custom Element 的例子：
-- -------------------- ---- ------- ------------------------- -------- ----- --------- ------- ----------- - ------------- - -------- - - ----------------------------------- ----------- ---------展开代码
在上面的例子中，我们首先创建了一个自定义的 HTML 元素 <my-element>。在 <script> 标签中，我们定义了一个名称为 MyElement 的 JavaScript 类，该类继承自 HTMLElement。在类的构造函数中，我们调用了 super()，这是用于调用继承的父类构造函数的语句。
最后，我们将自定义元素配置为 my-element，使用 customElements.define() 方法进行注册。这个方法接受两个参数：自定义元素的名称和它的类。
自定义元素的生命周期
Custom Elements 有一个生命周期。当一个自定义元素被创建时，它会经历以下阶段：
- constructor()：自定义元素被创建后，第一个被调用的是
constructor()方法。 - connectedCallback()：在元素被添加到文档流中时调用此方法。如果元素被添加到一个节点中，而这个节点已经在文档流中，则此方法将被调用。注意，如果在元素还没有被放到文档流中就进行了修改，此方法不会被调用。如果需要重新连接到文档流，该元素将被删除并再次添加到文档流中，以触发此方法。
- disconnectedCallback()：与
connectedCallback()相反，当元素从文档流中移除时，将调用此方法。 - attributeChangedCallback()：当元素的属性发生变化时，将调用此方法。你可以使用
observedAttributes()方法通过传入一个数组来指定暴露给监听器的属性列表。在此方法内部，oldValue和newValue参数将分别包含先前和当前的值。
以下是一个例子，展示了以上生命周期的用法：
-- -------------------- ---- ------- ----- --------- ------- ----------- - ------------- - -------- ------------------------ --------- - ------------------- - ------------------------------ --------- - ---------------------- - --------------------------------- --------- - ------------------------------ --------- --------- - ------------------------------------- ------ ---- ---------------------- - ------ --- -------------------- - ------ ----------------- - - ----------------------------------- ----------- ----- --------- - ------------------------------------- -------------------------------------- --------- ------------------------------------- -------------------------------------- --------- -------------------------------------展开代码
运行上面的代码，你会看到如下输出：
constructor called attributeChangedCallback called with my-attribute=hello connectedCallback called attributeChangedCallback called with my-attribute=world disconnectedCallback called
子元素的创建
当父元素被创建时，子元素还没有被创建。因此，将子元素添加到父元素可能会导致问题。下面是一个例子：
-- -------------------- ---- ------- ------------------------- -------- ----- --------- ------- ----------- - ------------- - -------- -------------- - -------------- ---------------- ---------------------------------------------- ----------- - - ----------------------------------- ----------- ---------展开代码
在上面的例子中，我们在 constructor() 中添加了一个 innerHTML，并使用 appendChild() 添加了一些文本。然而，由于元素还没有被连接到文档流中，子元素也还没有被创建。因此，添加子元素的操作将失败。
添加子元素的正确方式
下面是一种添加自定义子元素的正确方式：
-- -------------------- ---- ------- ------------------------- -------- ----- --------- ------- ----------- - ------------- - -------- ----- ------ - ------------------- ----- ------ --- ----- ---- - ------------------------------- -------------- - ------ ------- ------------------------- - - ----------------------------------- ----------- ---------展开代码
在这个例子中，我们使用 attachShadow() 方法来创建一个 Shadow DOM，该对象将在 Custom Element 内部创建。然后，我们创建了一个 span 元素，并添加了文本。最后，我们将 span 元素添加到 Shadow DOM 中，以成功创建自定义元素。
总结
Custom Elements 是现代 Web 开发的一个强大特性。在使用它们时，需要注意它们的生命周期，并使用正确的方式来添加子元素。本文深入探讨了 Custom Elements 里的一些细节问题，包括组件的写法，自定义元素的生命周期以及添加子元素的正确方式。希望对你有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64fbea7af6b2d6eab31fa3df
