在前端开发中，有许多常用的 Web 组件都是由浏览器原生的 HTML 标签定义的，比如 <button>, <input> 等等。但是，这些标签可能并不能完全满足我们的需求，甚至可能会导致 HTML 结构的复杂性。Custom Elements 和 Shadow Dom 是两个最近浏览器原生支持的 Web 标准，使得开发者可以自定义标签，并可以使用 Shadow Dom 来控制标签内部的样式和行为。
在本文中，我们将深入介绍 Custom Elements 和 Shadow Dom，以及它们如何配合使用来创建自定义的 Web 组件。
Custom Elements
Custom Elements 可以让开发者定义自己的 HTML 标签，并添加自定义的行为。例如，我们可以定义一个名为 x-slider 的标签，该标签可以实现一个滑块。
定义 Custom Elements 需要使用 window.customElements.define() 方法，该方法接受两个参数：自定义元素的名称和一个 JavaScript 类。下面是一个 x-slider 元素的定义示例：
-- -------------------- ---- ------- ----- ------- ------- ----------- - ------------- - -------- -- --- - ------------------- - -- --- - ---------------------- - -- --- - ------------------------------ --------- --------- - -- --- - - ---------------------------------------- ---------展开代码
在上面的代码中，我们定义了一个名为 XSlider 的类，该类继承自 HTMLElement，并实现了 connectedCallback, disconnectedCallback, attributeChangedCallback 等生命周期方法，以及我们自定义的方法和属性。最后，我们使用 window.customElements.define 方法来注册这个自定义元素，元素名称为 x-slider。
Custom Elements 的定义虽然简单，但是它们缺失了封装性，元素内部的样式和行为会影响全局，这时候我们需要使用 Shadow Dom。
Shadow Dom
Shadow Dom 可以让我们创建一个 DOM 子树，该子树与外部 DOM 树隔离，使得自定义元素的内部样式和行为不会影响全局。
使用 Shadow Dom 很简单，我们只需要在 Custom Elements 构造函数中添加以下代码即可：
this.attachShadow({ mode: 'open' });
这样，我们就创建了一个 Shadow Dom，并将其连接到自定义元素的根元素上。接下来，我们就可以在该 Shadow Dom 中编写 HTML，CSS 和 JavaScript 代码，可以使用 <slot> 标签来定义插槽，以便外部的代码可以往其中插入内容。例如，我们可以添加一个静态的 HTML 文件，用于定义 x-slider 的 Shadow Dom：
-- -------------------- ---- ------- --------- ----------------------- ------- ----- - -------- ------ --------- --------- ------ ------ ------- ----- -------------- ---- ----------------- ----- --------- ------- - ------ - --------- --------- ---- -- ------- -- ----- -- ------ ----- ----------------- ----- ------- -------- ----------- --------- ---- ------- - -------- ---- -------------------- ----------- -------- ----- -------- - ----------------------------------------------------- ----- ------- ------- ----------- - ------------- - -------- ------------------- ----- ------ --- ------------------------------------------------------ ---------- - ---------------------------------------- ---------------------------------------- ----------------------------- ---------------------------------- ----------------------------- -------------------------------- --------------------------- - -------------- - ----------- - --------- - ---------------------- ------------- - ----- - -------------- - -- --------------- - ------------------- ----- - - --------- - ------------ ----- ---- - ---------------- - ----------------------- ----- -------- - ------------------- - ----- --- --- -------------------------- - ---------------------- - ---------- - - ------------ - -- --------------- - ------------------- ------------- - ------ - - - ---------------------------------------- --------- ---------展开代码
在上面的代码中，我们首先定义了 x-slider 的 HTML 模板，再将其添加到 Shadow Dom 中，然后使用 JavaScript 代码来实现滑块的行为逻辑。
通过这种方式，我们可以轻松地使用 Custom Elements 和 Shadow Dom 创建我们自己的 Web 组件，并且可以在组件内部控制样式和行为。这样可以使代码更加封装和复用，也更容易维护和扩展。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67b69e8e306f20b3a62b2ed3
