在现代 Web 应用程序中，组件化成为了一个主流的设计模式，而 Web Components 是一种非常强大的组件化技术。通过将 Web Components 与 Shadow DOM 和 Custom Elements 相结合，可以轻松地创建可重用、独立样式和逻辑的自定义 Web 元素。
Shadow DOM
Shadow DOM 是一种将样式、结构和行为封装到一个独立的作用域中的技术。这样做可以避免全局 CSS 和 JavaScript 的污染，并且可以在不影响相邻元素的情况下创建具有复杂样式和交互的组件。
创建 Shadow DOM 根节点
在创建 Shadow DOM 根节点之前，必须先创建一个主节点，可以使用普通的 HTML 元素或者已经存在的元素作为主节点，例如：
<div class="container"></div>
然后，在 JavaScript 中创建 Shadow DOM 根节点并将其附加到主节点上：
const container = document.querySelector('.container');
const shadowRoot = container.attachShadow({ mode: 'open' });将样式和行为封装到 Shadow DOM 中
将样式和行为封装到 Shadow DOM 中可以避免全局污染，并且可以重用一个或多个元素的样式和 JavaScript 代码。
在 Shadow DOM 根节点中使用内联样式或添加样式标签来定义样式：
-- -------------------- ---- -------
----- ---------- - ---------------------- ----- ------ ---
-------------------- - -
-------
-- -- --
--------
---- ------------------
---- ---- -- ---
------
--
-- ------
---------------------------------------------------------------- -- -- -
-- ---
---这个示例创建了一个自定义的 Web 元素，并将其样式和行为封装到 Shadow DOM 中。HTML 中的主节点和 Shadow DOM 中的根节点是两个不同的作用域，它们之间没有任何关系。
Custom Elements
Custom Elements 是一种可以扩展 HTML 标签的技术，使其具有自定义的行为和样式。通过创建自定义元素并定义其行为和样式，可以轻松地扩展默认元素，同时为用户提供了自定义元素的创建方式。
定义 Custom Elements
在定义 Custom Elements 之前，必须确定元素的名称和继承自哪个原生元素。例如，自定义的按钮元素可以继承自 <button>：
-- -------------------- ---- -------
----- -------- ------- ----------------- -
------------- -
--------
-- -- ------ ---
----- ---------- - ------------------- ----- ------ ---
-------------------- - -
-------
-- -- --
--------
--------
---- ---- ---
---------
--
-- --------
------------------------------------------------------------ -- -- -
-- ---
---
-
-此代码定义了一个自定义的按钮元素，继承自 <button> 元素，并将其样式和行为封装到 Shadow DOM 中。Custom Elements 支持所有的 HTML 元素标签，并为网页开发人员提供了大量的自定义选择。
注册 Custom Elements
在定义 Custom Elements 后，需要经过注册才能在页面上使用。可以使用 customElements.define() 方法来注册元素：
customElements.define('my-button', MyButton, { extends: 'button' });customElements.define() 接受一个元素名称、一个构造函数、还可以指定元素继承的原生元素。在示例中，自定义的按钮元素被指定为继承自 <button> 元素。
在页面上使用 Custom Elements
一旦自定义元素被注册，就可以在页面上使用它了：
<my-button>点击我</my-button>
这样就可以在页面上创建自定义的按钮元素，并在其中使用自定义的样式和行为。
创建自定义的 Web 元素
通过将 Shadow DOM 和 Custom Elements 相结合，就可以创建可重用、可定制化、独立样式和行为的自定义 Web 元素。下面是一个完整的示例：
-- -------------------- ---- -------
----- --------- ------- ----------- -
------------- -
--------
-- -- ------ ---
----- ---------- - ------------------- ----- ------ ---
-------------------- - -
-------
-------- -
------- --- ----- -----
-------- -----
-
--------
---- ----------------
--- -------------------- -----------
-- -----------------------------
------
--
-
-
----------------------------------- -----------这个示例创建了一个自定义的 Web 元素，将其样式和行为封装到 Shadow DOM 中。在 HTML 中，可以像使用其他元素一样使用此自定义元素：
<my-element></my-element>
总结
Web Components 架构包括 Shadow DOM 和 Custom Elements 两个部分，它们为开发者提供了一个可重用、独立样式和逻辑的自定义 Web 元素的创建方式。
通过将样式和行为封装到 Shadow DOM 中，可以避免全局污染，并且可以重用一个或多个元素的样式和代码。通过自定义元素并定义其行为和样式，可以轻松扩展默认元素，同时为用户提供了自定义元素的创建方式。
Web Components 技术是构建可扩展、易维护和高性能 Web 应用程序的有力工具。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/647bf33d968c7c53b0731e84