Web Components 是一种新的 Web 技术，它可以让我们创建可重用的自定义 HTML 元素，从而提高代码的可维护性和可扩展性。其中，Custom Elements 和 Shadow DOM 是 Web Components 的两个核心特性，它们的结合可以发挥 Web Components 的潜力。本文将介绍 Custom Elements 和 Shadow DOM 的原理和用法，并提供实际示例，帮助读者更好地理解和应用这两个特性。
Custom Elements
Custom Elements 是指通过 JavaScript 定义的自定义 HTML 元素。它们可以像普通 HTML 元素一样使用，但具有更高的可定制性和可重用性。Custom Elements 的定义包括两个部分：元素名称和元素行为。
元素名称
元素名称是指自定义元素的名称，它必须符合自定义元素的命名规则。自定义元素的命名规则与普通 HTML 元素的命名规则类似，但必须包含一个连字符（-），且不能以连字符开头。例如，以下是合法的自定义元素名称：
<my-element></my-element> <my-button></my-button>
元素行为
元素行为是指自定义元素的行为，它包括元素的属性、方法和事件。自定义元素的行为可以通过 JavaScript 定义，通常使用 ES6 的类（class）语法。例如，以下是一个简单的自定义元素定义：
class MyElement extends HTMLElement { constructor() { super(); this.textContent = 'Hello, World!'; } } customElements.define('my-element', MyElement);
在上面的例子中，我们定义了一个名为 MyElement 的自定义元素，它继承自 HTMLElement 类。在构造函数中，我们设置了元素的文本内容为“Hello, World!”。最后，我们使用 customElements.define() 方法将 MyElement 注册为自定义元素，并指定元素名称为“my-element”。
自定义元素的用法
一旦定义了自定义元素，我们就可以像普通 HTML 元素一样使用它。例如，以下是一个使用 MyElement 的示例：
<my-element></my-element>在浏览器中运行上面的代码后，我们将看到一个文本内容为“Hello, World!”的元素。这个元素就是我们刚刚定义的自定义元素。
Shadow DOM
Shadow DOM 是指一种隔离的 DOM 子树，它允许我们将元素的样式和行为封装在内部，从而避免与外部文档的样式和行为发生冲突。Shadow DOM 可以与 Custom Elements 结合使用，从而实现更高级的 Web 组件。
Shadow DOM 的创建
Shadow DOM 的创建需要使用元素的 attachShadow() 方法。该方法接受一个配置对象作为参数，用于指定 Shadow DOM 的模式和样式。例如，以下是一个创建 Shadow DOM 的示例：
-- -------------------- ---- ------- ----- --------- ------- ----------- - ------------- - -------- ----- ------ - ------------------- ----- ------ --- ----- - - ---------------------------- ------------- - ------- -------- ---------------------- - - ----------------------------------- -----------展开代码
在上面的例子中，我们在 MyElement 的构造函数中创建了一个 Shadow DOM，并将一个段落元素添加到 Shadow DOM 中。我们使用了 attachShadow() 方法，并传入了一个配置对象，其中 mode 属性指定了 Shadow DOM 的模式为“open”（表示可以从外部访问 Shadow DOM）。最后，我们将创建的段落元素添加到 Shadow DOM 中。
Shadow DOM 的样式
Shadow DOM 的样式可以通过 style 标签或 link 标签来定义。例如，以下是一个使用 style 标签定义 Shadow DOM 样式的示例：
-- -------------------- ---- ------- ----- --------- ------- ----------- - ------------- - -------- ----- ------ - ------------------- ----- ------ --- ----- ----- - -------------------------------- ----------------- - - - - ------ ---- - -- -------------------------- ----- - - ---------------------------- ------------- - ------- -------- ---------------------- - - ----------------------------------- -----------展开代码
在上面的例子中，我们在 Shadow DOM 中添加了一个 style 标签，并定义了一个样式规则，将段落元素的颜色设置为红色。最后，我们将创建的段落元素添加到 Shadow DOM 中。
Shadow DOM 的事件
Shadow DOM 中的事件可以通过 Event.composed 属性来判断是否可以冒泡到外部文档。如果 Event.composed 为 true，则表示事件可以冒泡到外部文档；否则，表示事件仅在 Shadow DOM 内部处理。例如，以下是一个捕获 click 事件的示例：
-- -------------------- ---- ------- ----- --------- ------- ----------- - ------------- - -------- ----- ------ - ------------------- ----- ------ --- ----- - - ---------------------------- ------------- - ------- -------- ---------------------- --------------------------- ----- -- - -------------------- ------ ------ ------ -- ----------------- - -------------------- ------ ------ ---- --- --- ----------- - -- - -------- ---- --- - - ----------------------------------- -----------展开代码
在上面的例子中，我们在 Shadow DOM 中添加了一个段落元素，并捕获了它的 click 事件。在事件处理程序中，我们使用 console.log() 方法输出了一些信息。如果事件可以冒泡到外部文档，我们将输出“Clicked inside Shadow DOM, but not composed”；否则，我们将输出“Clicked inside Shadow DOM”。
结合 Custom Elements 和 Shadow DOM
结合 Custom Elements 和 Shadow DOM 可以实现更高级的 Web 组件。例如，以下是一个结合 Custom Elements 和 Shadow DOM 的示例：
-- -------------------- ---- ------- ----- --------- ------- ----------- - ------------- - -------- ----- ------ - ------------------- ----- ------ --- ----- ----- - -------------------------------- ----------------- - - ----- - -------- ------ ------- --- ----- ------ -------- ----- - - - ------ ---- - -- -------------------------- ----- - - ---------------------------- ------------- - ---------------------------- -- ------- -------- ---------------------- - ------ --- -------------------- - ------ ------------ - ------------------------------ --------- --------- - -- ----- --- --------- -- ---------------- - ----- - - ----------------------------------- ------------- - -------- -- ------- -------- - - - ----------------------------------- -----------展开代码
在上面的例子中，我们定义了一个名为 MyElement 的自定义元素，并结合使用了 Shadow DOM。在 Shadow DOM 中，我们定义了一些样式规则，包括将元素显示为块级元素、添加一个黑色边框和内边距，以及将段落元素的颜色设置为红色。我们还在 Shadow DOM 中添加了一个段落元素，并将其文本内容设置为自定义元素的 message 属性（如果没有指定 message 属性，则默认为“Hello, World!”）。
在 MyElement 中，我们使用了 static get observedAttributes() 方法，指定了需要观察的属性为 message。然后，我们在 attributeChangedCallback() 方法中处理 message 属性的变化，更新 Shadow DOM 中的段落元素的文本内容。
最后，我们使用 customElements.define() 方法将 MyElement 注册为自定义元素，并指定元素名称为“my-element”。
总结
Custom Elements 和 Shadow DOM 是 Web Components 的两个核心特性，它们的结合可以发挥 Web Components 的潜力。Custom Elements 允许我们创建可重用的自定义 HTML 元素，而 Shadow DOM 则允许我们将元素的样式和行为封装在内部，从而避免与外部文档的样式和行为发生冲突。结合使用 Custom Elements 和 Shadow DOM 可以实现更高级的 Web 组件，提高代码的可维护性和可扩展性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65bb4ecfadd4f0e0ff406e46
