理解 Web Components 的 Custom Elements 和 Shadow DOM-JavaScript中文网-JavaScript教程资源分享门户

Web Components 是一个可重用的组件化系统，它允许您定义定制的 HTML 元素并在 Web 应用程序中使用它们。其中最重要的两个组成部分是 Custom Elements 和 Shadow DOM。

Custom Elements

Custom Elements 允许开发者创建具有自定义行为和外观的 HTML 元素，以便在应用程序中能够复用。它们可以看作是一个完整的元素，用于替换通常的 HTML 元素，如<div>或 <span>等。

如何创建 Custom Elements？

创建 Custom Elements 的思路在于实现一个 JavaScript 模板类，然后使用CustomElementRegistry.define方法定义它的名称、扩展的元素以及回调函数。示例代码如下：

-- -------------------- ---- -------
----- --------- ------- ----------- -
  ------------- -
    --------
    -- ------------
  -
  ------------------- -
    -- -------------- 
    ---------------------- ------------
  -
  ---------------------- -
    -- --------------- 
    ---------------------- ---------------
  -
  --------------------------------------- --------- --------- -
    -- ---------- 
    ----------------------------- ------- ---- ----------- -- --------------
  -
-

----------------------------------- -----------

在代码中：

MyElement是创建组件的模板类，它继承自 HTMLElement。
constructor 方法是可选的，它可以在组件实例化时初始化组件。
connectedCallback 方法是在组件连接到 DOM 时调用的函数，您可以在这里添加一些初始化代码。
disconnectedCallback 方法是在组件从 DOM 中移除时调用的函数，您可以在这里添加清理代码。
attributeChangedCallback 方法是在属性改变时调用的函数。您可以在这里处理属性改变，例如更新组件的外观。
customElements.define() 方法用于定义自定义元素的名称及其继承的元素。在这里，我们定义了一个 my-element HTML 元素，并扩展了 HTMLElement。

如何使用 Custom Elements？

当您定义了一个自定义元素之后，您可以像普通 HTML 元素一样使用它：

<my-element></my-element>

如果您的自定义元素需要一些属性，您可以使用 attrubutes 来为它添加属性：

<my-element name='my-component'></my-element>

在这里，我们为 my-element 添加了一个 name 属性，属性值为 my-component。

Shadow DOM

Shadow DOM 允许您将隐藏的 DOM 树附加到元素上，它有利于样式和复杂的 DOM 操作。使用 Shadow DOM，组件的样式和行为可以被封装在组件内部，以便于从外部组件环境进行隔离。

如何创建 Shadow DOM？

创建 Shadow DOM 的关键是使用element.attachShadow()方法创建 Shadow DOM 实例，最后一个参数是 Shadow DOM 的模式，它有两个值：open 和 closed。在 open 模式下，开发者可以在其他组件中检索和修改 Shadow DOM 实例，而在 closed 模式下，它只能从同一组件内部访问。示例代码如下：

const shadowDOM = element.attachShadow({mode: 'closed', });

在代码中，我们创建了一个 Shadow DOM 实例，并将它附加到一个 HTML 元素上。mode 值可以为 closed 或 open。

如何将组件添加到 Shadow DOM 中？

一旦我们创建了一个 Shadow DOM 实例，我们需要将组件添加到 Shadow DOM 中。为了实现这一点，您可以在 Shadow DOM 中使用 DOM 方法来构建您的组件。

const shadowDOM = element.attachShadow({mode: 'open'});
const container = document.createElement('div');
container.setAttribute('class', 'container');
shadowDOM.appendChild(container);

在这里，我们创建了一个 <div> 元素，并设置其 class 为 container，然后将它添加到 Shadow DOM 中。

如何使用 Shadow DOM 中的样式？

Shadow DOM 允许您将样式和行为封装在组件内部。这意味着您可以在 Shadow DOM 中定义样式，并避免这些样式影响其他组件。

.container {
   background-color: #f00;
   color: #fff;
}

在这里，我们定义了一个 class 名为 container，并为它设置了一些样式。这些样式仅仅影响被添加到相应组件的 Shadow DOM 中。

如何使用 Shadow DOM？

在组件的构造函数中，您可以使用 createShadowRoot（）方法创建一个 Shadow DOM。

-- -------------------- ---- -------
----- --------------- ------- ----------- -
  ------------- -
    --------
    ----- ---------- - ------------------- ----- ------ ---
    -------------------- - -
      -------
        ---------- -
          ----------------- -----
          ------ -----
        -
      --------
      ---- ----------------------- ------ ---------
    --
  -
-

----------------------------------------- -----------------

在上面的例子中，我们创建了一个 Shadow DOM，并将其添加到我们的组件中。我们定义了一些样式，并将它们应用到了组件的内容。

总结

Custom Elements 和 Shadow DOM 是 Web Components 的核心组成部分，它们为开发者提供了一种面向组件的开发方法，并让您能够编写更好的可维护的代码。通过这篇文章的详细讲解，相信您已经对它们有了更深的理解，并能够尝试使用它们来构建更优质的组件。

参考

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/6477eff6968c7c53b043b9a6