Web Components 是一种用于创建可重用的定制元素的技术，它由三个主要的 API 组成：Custom Elements、Shadow DOM 和 HTML Templates。其中，Custom Elements 和 Shadow DOM 是 Web Components 最核心的两个 API。
Custom Elements
Custom Elements API 允许开发者创建自定义的 HTML 元素，并定义它们的行为。通过定义自定义元素，开发者可以将复杂的功能封装在一个单一的元素中，从而使代码更加模块化和易于维护。
定义一个 Custom Element
定义一个 Custom Element 需要使用 CustomElementRegistry.define() 方法。这个方法接收两个参数：元素名称和元素类。
-- -------------------- ---- ------- ----- --------- ------- ----------- - ------------- - -------- -- --- - -- --- - ----------------------------------- -----------展开代码
在上面的代码中，我们定义了一个名为 MyElement 的元素，并将其注册为 my-element。这个元素继承自 HTMLElement，并在其构造函数中定义了一些行为。
生命周期回调
Custom Elements API 还提供了一些生命周期回调函数，可以在元素的不同生命周期阶段中执行一些操作。这些回调函数包括：
connectedCallback()：元素被插入文档时调用disconnectedCallback()：元素从文档中移除时调用adoptedCallback()：元素被移动到新的文档时调用attributeChangedCallback(name, oldValue, newValue)：元素的某个属性发生变化时调用
-- -------------------- ---- ------- ----- --------- ------- ----------- - ------------- - -------- -- --- - ------------------- - -------------------- --------- -- --- ------ - ---------------------- - -------------------- ------------ ---- --- ------ - ----------------- - -------------------- ----- -- - --- ----------- - ------------------------------ --------- --------- - ---------------------- ------- ------- ---- ----------- -- -------------- - -展开代码
使用 Custom Element
使用自定义元素非常简单，只需要在 HTML 中使用自定义元素的标签名即可。
<my-element></my-element>Shadow DOM
Shadow DOM API 允许开发者创建封装的 DOM 树，使其与页面中的其他 DOM 树隔离开来。这种隔离可以确保开发者的组件不会与页面中的其他组件相互干扰，从而提高了组件的可重用性和可维护性。
创建 Shadow DOM
创建 Shadow DOM 需要使用 Element.attachShadow() 方法。这个方法接收一个对象参数，其中 mode 属性用于指定 Shadow DOM 的模式。有两种模式可选：
open：可以从外部访问 Shadow DOM 中的元素closed：无法从外部访问 Shadow DOM 中的元素
class MyElement extends HTMLElement { constructor() { super(); const shadowRoot = this.attachShadow({ mode: 'open' }); // ... } // ... }
在上面的代码中，我们创建了一个名为 MyElement 的元素，并在其构造函数中创建了一个 Shadow DOM。
在 Shadow DOM 中添加元素
在 Shadow DOM 中添加元素需要使用 ShadowRoot.appendChild() 方法。
-- -------------------- ---- ------- ----- --------- ------- ----------- - ------------- - -------- ----- ---------- - ------------------- ----- ------ --- ----- - - ---------------------------- ------------- - ------- ------ ------ -------------------------- - -- --- -展开代码
在上面的代码中，我们在 Shadow DOM 中添加了一个 <p> 元素，并设置了它的内容为 'Hello, Shadow DOM!'。
样式隔离
Shadow DOM 还可以实现样式隔离，使得开发者可以在组件内部定义样式，而不必担心样式会影响到页面中的其他组件。
-- -------------------- ---- ------- ----- --------- ------- ----------- - ------------- - -------- ----- ---------- - ------------------- ----- ------ --- ----- ----- - -------------------------------- ----------------- - - - - ------ ---- - -- ------------------------------ ----- - - ---------------------------- ------------- - ------- ------ ------ -------------------------- - -- --- -展开代码
在上面的代码中，我们在 Shadow DOM 中定义了一个样式，它只会影响到 Shadow DOM 中的元素。
使用 Shadow DOM
使用 Shadow DOM 需要在 Custom Element 中使用 Element.shadowRoot 属性。
<my-element></my-element>-- -------------------- ---- ------- ----- --------- ------- ----------- - ------------- - -------- ----- ---------- - ------------------- ----- ------ --- ----- - - ---------------------------- ------------- - ------- ------ ------ -------------------------- - -- --- - ----- --------- - ------------------------------------- ----- ---------- - ---------------------展开代码
在上面的代码中，我们获取了 <my-element> 元素的 Shadow DOM，并在其中添加了一个 <p> 元素。
示例代码
下面是一个简单的示例，展示了如何使用 Custom Elements 和 Shadow DOM 创建一个自定义元素。
-- -------------------- ---- ------- --------- ----- ------ ------ ----- ---------------- ---------- ------------------ ------- ------ ------------------------- ------- ----------------------------- ------- -------展开代码
-- -------------------- ---- ------- ----- --------- ------- ----------- - ------------- - -------- ----- ---------- - ------------------- ----- ------ --- ----- ----- - -------------------------------- ----------------- - - - - ------ ---- - -- ------------------------------ ----- - - ---------------------------- ------------- - ------- ------ ------ -------------------------- - - ----------------------------------- -----------展开代码
在上面的代码中，我们定义了一个名为 my-element 的自定义元素，并在其构造函数中创建了一个 Shadow DOM。在 Shadow DOM 中，我们定义了一个样式，它会将 <p> 元素的文本颜色设置为红色。然后，我们添加了一个 <p> 元素，并将其添加到 Shadow DOM 中。最后，我们将 MyElement 类注册为 my-element 元素的构造函数。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67cabfb7e46428fe9e33d5cf
