前端开发越来越注重组件化，开发人员需要不断地寻找新的方法和技术来实现更好的组件化思想。 Custom Elements 和 Shadow DOM 是两种用于开发自定义组件的新技术，本文将详细介绍这两种技术并提供示例代码，帮助读者更好地理解和运用。
Custom Elements
Custom Elements 是一种原生的 Web Components，它允许开发人员创建自定义的 HTML 标签，并为其定义自己的行为和样式。 Custom Elements 可以继承原有的 HTML 标签，也可以完全自定义一个全新的标签。
定义 Custom Elements
在定义 Custom Elements 之前，需要先了解以下属性：
tagName：Custom Element 要使用的 HTML 标签名。extends：Custom Element 要继承的已有 HTML 标签名，如果不继承，则可省略该属性。constructor()：Custom Element 的构造函数，用于定义 Custom Element 的行为。connectedCallback()：当 Custom Element 被插入到文档中时自动调用，用于初始化。disconnectedCallback()：当 Custom Element 被移除时自动调用，用于清理。attributeChangedCallback()：当 Custom Element 中定义的自定义属性发生变化时自动调用。
下面是一个定义 Custom Element 的示例代码：
-- -------------------- ---- ------- ----- --------------- ------- ----------- - ------------- - -------- -- -- ------ ------- ------ - ------------------- - -- --- - ---------------------- - -- -- - ---------------------------------- --------- --------- - -- ----------- - - ------------------------------------------ -----------------展开代码
在上述代码中，我们通过 class 定义了一个 MyCustomElement 类，该类继承了 HTMLElement 类，然后在 constructor 中定义了 Custom Element 的行为和样式。在 connectedCallback 中进行了初始化操作，在 disconnectedCallback 中进行了清理操作，在 attributeChangedCallback 中定义了自定义属性变化后的操作。
最后使用 customElements.define() 定义了一个 my-custom-element 标签，这样就创建了一个 Custom Element。
使用 Custom Elements
在 HTML 文档中使用 Custom Element 的方式与使用其他标签相同，例如：
<my-custom-element></my-custom-element>在代码中，Custom Element 的行为和样式将被应用到指定的标签上。
Shadow DOM
Custom Elements 允许我们创建自定义标签，但是标签内的样式和行为可能会与文档的其他元素产生冲突。这时就需要使用 Shadow DOM，它可以将我们定义的 Custom Element 包含在一个独立的 DOM 中，从而保证 Custom Element 的样式和行为不会对其他元素产生影响。
创建 Shadow DOM
创建 Shadow DOM 的步骤如下所示：
定义 Custom Element，代码如上文所述。
在 Custom Element 的构造函数中创建 Shadow DOM，代码如下所示：
constructor() { super(); const shadow = this.attachShadow({ mode: 'open' }); // 在 shadow 中创建 DOM 元素 }
使用
attachShadow()方法创建 Shadow DOM，可以指定mode: 'open'或者mode: 'closed'，前者允许外部的 JavaScript 访问 Shadow DOM 中的元素，后者则不允许。在 Shadow DOM 中创建 DOM 元素，代码如下所示：
const div = document.createElement('div'); div.innerText = '我是 Shadow DOM 中的内容'; shadow.appendChild(div);
在 Shadow DOM 中创建 DOM 元素的方式与在普通 DOM 中创建元素的方式相同。
最终效果如下所示：
-- -------------------- ---- ------- ----- --------------- ------- ----------- - ------------- - -------- ----- ------ - ------------------- ----- ------ --- ----- --- - ------------------------------ ------------- - --- ------ --- ------ ------------------------ - - ------------------------------------------ -----------------展开代码
插入到 HTML 文档中后，可以看到 my-custom-element 标签中显示的内容为 “我是 Shadow DOM 中的内容”。
样式控制
Shadow DOM 的强大之处在于样式控制。我们可以在 Shadow DOM 中定义样式，同时不影响到文档中的其他元素。
样式的定义方式如下所示：
-- -------------------- ---- ------- ----- ----- - -------------------------------- ----------------- - - --- - ------ ---- ---------- ----- ------------ ----- - -- --------------------------展开代码
在 Shadow DOM 中创建一个 style 标签，在 textContent 中定义样式，然后将 style 标签添加到 Shadow DOM 中即可。
下面是包含样式的 Shadow DOM 的示例代码：
-- -------------------- ---- ------- ----- --------------- ------- ----------- - ------------- - -------- ----- ------ - ------------------- ----- ------ --- ----- ----- - -------------------------------- ----------------- - - --- - ------ ---- ---------- ----- ------------ ----- - -- -------------------------- ----- --- - ------------------------------ ------------- - --- ------ --- ------ ------------------------ - - ------------------------------------------ -----------------展开代码
插入到 HTML 文档中后，可以看到 my-custom-element 标签中显示的内容为 “我是 Shadow DOM 中的内容”，样式为 color: red; font-size: 20px; font-weight: bold;。
小结
通过使用 Custom Elements 和 Shadow DOM，我们可以轻松地实现 Web Components 的开发。 Custom Elements 允许我们创建自定义标签，并为其定义行为和样式，Shadow DOM 则可以将我们定义的 Custom Element 包含在一个独立的 DOM 中，从而保证其样式和行为不会对其他元素产生影响。
示例代码
下面是包含 Custom Elements 和 Shadow DOM 的示例代码：
-- -------------------- ---- ------- ----- --------------- ------- ----------- - ------------- - -------- ----- ------ - ------------------- ----- ------ --- ----- ----- - -------------------------------- ----------------- - - --- - ------ ---- ---------- ----- ------------ ----- - -- -------------------------- ----- --- - ------------------------------ ------------- - --- ------ --- ------ ------------------------ - ------------------- - ------------------- ------- -------- - ---------------------- - ------------------- ------- ------ - ---------------------------------- --------- --------- - --------------- ----------- - ----------- --- -------------- - - ------------------------------------------ ----------------- ----- --------- - ------------------------------ ---------------------- - ---- ----- ----- ------------------------------------- ----- ------------- - -------------------------------------------- -------------------------------------展开代码
插入到 HTML 文档中后，可以看到 container 标签中包含了一个 my-custom-element 标签，该标签中显示的内容为 “我是 Shadow DOM 中的内容”，同时样式为 color: red; font-size: 20px; font-weight: bold;。 在控制台中，也可以看到 Custom Element 的生命周期函数调用和属性变化的输出结果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67c0565e314edc26846b1732
