近年来，Web Components 成为了前端领域的新宠，其中 Custom Elements 和 Shadow DOM 作为 Web Components 的两个重要特性，为开发者提供了更加便利和灵活的组件化方案。本文将从理论和实践两方面分析这两个特性，帮助读者更好地理解和应用它们。
Custom Elements
Custom Elements 是 Web Components 中的一项核心特性，它允许开发者自定义 HTML 元素并在页面中使用。这些自定义元素既可以包含本地浏览器支持的内容，也可以是完全新的组合。
定义一个自定义元素
定义一个自定义元素需要通过 customElements.define() 方法来实现，其语法如下：
customElements.define(tagName, constructor, options);
其中，tagName 为自定义元素的名称，必须包含短横线；constructor 是一个类，用于定义自定义元素的行为和样式；options 是一个可选的对象，用于配置自定义元素。
例如，我们定义一个名为 my-element 的自定义元素，代码如下：
class MyElement extends HTMLElement {
constructor() {
super();
this.textContent = 'Hello, World!';
}
}
customElements.define('my-element', MyElement);其中，MyElement 继承自 HTMLElement，在实例化时设置 textContent 为 "Hello, World!"。最后通过 customElements.define() 方法将 my-element 定义为一个自定义元素。
在 HTML 页面中使用该自定义元素的方式如下：
<my-element></my-element>
这将会显示 "Hello, World!"。
自定义元素的生命周期
自定义元素在创建、插入到文档、属性变化和删除等过程中都有相应的生命周期方法，开发者可以在这些生命周期方法中添加自己的逻辑。
以下是自定义元素的生命周期方法：
constructor()：构造函数，用于初始化自定义元素。connectedCallback()：该方法在自定义元素被插入到文档中时调用。disconnectedCallback()：该方法在自定义元素从文档中删除时调用。attributeChangedCallback(name, oldValue, newValue)：该方法在自定义元素的属性值发生变化时调用。
例如，我们在 connectedCallback() 方法中添加控制台日志：
-- -------------------- ---- -------
----- --------- ------- ----------- -
------------- -
--------
---------------- - ------- --------
-
------------------- -
---------------------- --- --------- -- --- -----------
-
-
----------------------------------- -----------当该自定义元素被插入到文档中时，控制台将会打印 "MyElement was connected to the document"。
Shadow DOM
Shadow DOM 是 Web Components 的另一个重要特性，它允许开发者将一些不希望在全局样式中出现的 CSS 和 HTML 封装到组件内部。这些封装后的内容只会对组件内部生效，从而避免了全局污染和命名冲突的问题。
创建 Shadow DOM
创建 Shadow DOM 需要使用 Element.attachShadow() 方法，其语法如下：
element.attachShadow({ mode: 'open' });其中，mode 取值为 "open" 或 "closed"，"open" 表示 Shadow DOM 可以从外部访问，"closed" 表示 Shadow DOM 无法从外部访问。
例如，我们在 connectedCallback() 方法中创建一个 Shadow DOM，并向其中添加一个 h1 标签：
-- -------------------- ---- -------
----- --------- ------- ----------- -
------------- -
--------
-
------------------- -
----- ------ - ------------------- ----- ------ ---
----- -- - -----------------------------
-------------- - ------- --------
-----------------------
-
-
----------------------------------- -----------在 HTML 页面中使用该自定义元素的方式如下：
<my-element></my-element>
这将会显示一个 "Hello, World!" 的 h1 标签。
封装 CSS
通过创建 Shadow DOM，我们可以封装一些 CSS 样式，使其只在组件内部生效。
例如，我们为自定义元素添加一些样式：
-- -------------------- ---- -------
----- --------- ------- ----------- -
------------- -
--------
-
------------------- -
----- ------ - ------------------- ----- ------ ---
----- -- - -----------------------------
-------------- - ------- --------
-----------------------
----- ----- - --------------------------------
----------------- - -
-- -
------ ----
-
--
--------------------------
-
-
----------------------------------- -----------这将会使该自定义元素内部的所有 h1 标签显示为红色。
总结
Custom Elements 和 Shadow DOM 是 Web Components 中的两个重要特性，它们为开发者提供了更加便利和灵活的组件化方案。其中，Custom Elements 允许开发者自定义 HTML 元素并在页面中使用，Shadow DOM 允许开发者将一些不希望在全局样式中出现的 CSS 和 HTML 封装到组件内部。
学习和应用 Custom Elements 和 Shadow DOM 的过程中需要注意以下几点：
- Custom Elements 中的生命周期方法可以帮助开发者在组件创建、插入到文档、属性变化和删除等过程中添加自己的逻辑。
- Shadow DOM 可以封装一些 CSS 样式，使其只在组件内部生效，避免了全局污染和命名冲突的问题。
- 创建 Shadow DOM 时需要注意 mode 的取值。
在实践中，可以通过使用 Custom Elements 和 Shadow DOM 将一些通用的组件进行封装，提高代码的可复用性和维护性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/648d960b48841e9894bec460