在 Web 前端开发领域中，Custom Elements 和 Shadow DOM 是两个非常重要的概念。它们的出现使得开发者们能够更加自由地创建和定义属于自己的定制化 Web 元素。
Custom Elements
Custom Elements 指的是自定义元素，因为在使用该技术前，我们只能使用 HTML 默认提供的元素。而借助 Custom Elements 技术，我们可以创建出自定义的元素。
自定义元素的创建需要通过 JavaScript 来实现。首先，我们需要创建一个继承自 HTMLElement 的类，然后再使用 window.customElements.define() 方法注册该元素。下面是一个例子：
class CustomButton extends HTMLElement {
constructor() {
super();
// 在构造函数中可以进行 Custom Button 的初始化操作
}
}
window.customElements.define('custom-button', CustomButton);其中，'custom-button' 就是自定义元素的标签名，CustomButton 就是将要创建的自定义元素类的名字。
通过以上操作，我们已经成功地创建出了一个自定义的元素，并且该元素可以像普通元素一样被添加到 HTML 文档中：
<custom-button>我是一个自定义元素</custom-button>
通过 Custom Elements，我们可以将我们想要的样式、布局和功能都封装到自定义元素中。
但是，Custom Elements 并不能实现完整的封装。如果我们需要更深层次的 DOM 封装，那么就需要使用 Shadow DOM。
Shadow DOM
Shadow DOM 是一种比 Custom Elements 更先进的技术，它可以将 DOM 树中的一部分封装起来，以达到更好的隔离效果。类比于我们日常开发中的函数封装，Shadow DOM 可以将某个 HTML 元素和外部文档的其他部分隔离开来。它可以保证一个自定义元素的内部结构和样式不会被外部环境所污染，从而使得我们能够更好地组合、复用和维护我们的代码。
使用 Shadow DOM 的步骤也很简单。我们只需要将 Custom Elements 中的一小段代码进行修改：
-- -------------------- ---- -------
----- ------------ ------- ----------- -
------------- -
--------
----- ------ - ------------------- ----- ------ ---
-- - ------ --- ----- ------ --
----- ------ - ---------------------------------
---------------- - --------
---------------------------
-
-
--------------------------------------------- --------------在上面的代码中，我们通过 attachShadow() 方法创建了一个 Shadow DOM，并且设置了 mode: 'open'，这种设置方式可以使得 Shadow DOM 可以被外部环境所访问和变更。
我们可以看到，我们使用了 append() 方法将 <button> 元素添加到了 Shadow DOM 中。此后，我们就可以像使用普通元素一样使用自定义元素了：
<custom-button></custom-button>
最终，我们会得到一个样式非常简单的自定义按钮。
应用技巧
修改 Shadow DOM 样式
我们可以在 Shadow DOM 中使用 CSS 来修改元素样式。但是，这样做是有一定限制的：我们只能够使用一种属性来修改样式，那就是 ::part。
首先，我们需要在 Shadow DOM 中为元素添加一个 part 属性，如下所示：
-- -------------------- ---- -------
------------- -
--------
----- ------ - ------------------- ----- ------ ---
-- - ------ --- ----- ------ --
----- ------ - ---------------------------------
---------------- - --------
--------------------------- -----------------
---------------------------
-然后，我们就可以在外部 CSS 中使用 ::part 来修改元素的样式了：
custom-button::part(custom-button) {
background-color: red;
color: white;
}与 Slot 的配合使用
Slot 是用于创建可复用的 HTML 模板的技术，它能够帮助我们更好地组合自定义元素。我们可以在自定义元素内部添加 <slot> 标签，这将会被替换成外部文档中的其他元素。
比如，我们可以创建一个自定义元素 custom-layout，通过该元素的插槽，我们可以在外部文档中填充内容：
-- -------------------- ---- -------
----- ------------ ------- ----------- -
------------- -
--------
----- ------ - ------------------- ----- ------ ---
-- - ------ --- ----- --- --
----- --- - ------------------------------
----- ---- - -------------------------------
-- - --- --------
----------------------
-- - --- ----- ------ --- -
------------------------
-
-
--------------------------------------------- --------------在外部文档中，我们可以使用以下代码来替换 custom-layout 元素内部的插槽：
<custom-layout> <p>第一段内容</p> <p>第二段内容</p> </custom-layout>
总结
Custom Elements 和 Shadow DOM 是现代 Web 前端开发中不可或缺的两个技术。它们的出现让我们能够更加自由地定义和封装属于自己的定制化 Web 元素，同时保证了代码的可维护性、可复用性和可扩展性。
希望读者通过本文的学习，能够对 Custom Elements 和 Shadow DOM 的使用和应用有更深入的了解，并且能够在实际开发中加以运用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6500ff1e95b1f8cacded90c6