Web Components 是一种基于 HTML、CSS 和 JavaScript 的新型技术，它能够将网页中的各个组件进行分离和独立处理，从而实现更加灵活和可复用的开发方式。其中，Custom Elements 和 Shadow DOM 是 Web Components 中最为核心和基础的两项技术，掌握这两项技术的使用方法和组合方式可以帮助我们更好地构建高效的 Web Components 应用。
Custom Elements
Custom Elements 是一项用于创建自定义 HTML 元素的技术，它可以让我们不仅仅使用常见的 HTML 元素，还可以自己定义并使用一些新的 HTML 元素。Custom Elements 的实现途径有两种方式：
- 继承 HTMLElement 类并在其中实现构造函数和其他方法。
- 使用 define() 方法，并在其中注册新的 Custom Element。
下面是一个 Custom Element 的示例代码：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
------------- ------- ------------
-------
------
-------------------------
--------
----- --------- ------- ----------- -
------------------- -
-------------- - ---------- -------------
-
-
----------------------------------- -----------
---------
-------
-------在上述代码中，我们定义了一个名为 MyElement 的 Custom Element，并且在其中实现了 connectedCallback() 方法。当我们将这个 Custom Element 加载到浏览器中时，它会在页面中添加一个 <my-element> 元素，并在其中显示 “Hello World!” 的文本。
Shadow DOM
Shadow DOM 是一项用于创建封闭的 DOM 节点树的技术，它能够使得我们的 Web Components 更加独立和安全，避免了 CSS 样式污染和 JavaScript 命名冲突等问题。同时，Shadow DOM 也可以帮助我们隐藏 Web Components 内部的实现细节，让外部的代码无法直接访问到其中的内容。
下面是一个 Shadow DOM 的示例代码：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
------------- --- ------------
-------
------
-------------------------
--------
----- --------- ------- ----------- -
------------- -
--------
----- ---------- - ------------------- ----- ------ ---
-------------------- - -
-------
-- - ------ ---- -
--------
--------- -----------
--
-
-
----------------------------------- -----------
---------
-------
-------在上述代码中，我们对 MyElement 进行了修改，使用了 attachShadow() 方法来创建了一个 Shadow DOM，然后在其中定义了一个样式和一个 <h1> 标签。在浏览器中打开这个示例代码，会发现页面中会出现一个带有红色文本的 “Hello World!” 标题。同时，我们也无法通过外部代码直接访问到 <h1> 标签和其中的内容。
Custom Elements 和 Shadow DOM 的组合
Custom Elements 和 Shadow DOM 都是 Web Components 中非常重要的技术，它们可以让我们创建出更加高效、灵活和独立的组件，从而有助于提高我们的开发效率和代码的可维护性。下面是一个 Custom Elements 和 Shadow DOM 的组合的示例代码：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
---------- ---------- ------------
-------
------
-------------------------
--------
----- --------- ------- ----------- -
------------- -
--------
----- ---------- - ------------------- ----- ------ ---
-------------------- - -
-------
-- - ------ ---- -
--------
---------------------------------- -- ------ -------------
--
-
------ --- -------------------- -
------ ------------
-
------------------------------ --------- --------- -
----- -- - ------------------------------------
-- ---- -
-------------- - ---------
-
-
-
----------------------------------- -----------
---------
-------
-------在这个示例代码中，我们创建了一个 Custom Element，它使用了 Shadow DOM 来封装了一个样式和一个带有可变文本内容的 <h1> 标签。我们还在其中实现了 observedAttributes() 和 attributeChangedCallback() 方法，使得这个 Custom Element 能够监听 message 属性的变化，并在其中动态更新我们的文本内容。
总结
Web Components 是一种高效、灵活和独立的 Web 应用开发方式，其中 Custom Elements 和 Shadow DOM 是实现 Web Components 最为重要的两项技术。我们可以使用 Custom Elements 来创建自定义 HTML 元素，同时使用 Shadow DOM 来实现封闭的 DOM 节点树，使得我们的 Web Components 更加独立、安全和有利于代码的维护和重构。通过掌握 Custom Elements 和 Shadow DOM 的使用方法和组合方式，我们能够更好地构建高效的 Web Components 应用，并使其更适合 Web 应用的开发和使用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/664ece50d3423812e4f632e3