前言
Custom Elements 是 Web Components 的一部分，是一种用于创建自定义 HTML 元素的 API。使用 Custom Elements，开发者可以创建具有特定功能和样式的元素，并在应用程序中使用它们。Custom Elements 的实现需要理解 Shadow DOM 和 HTML Templates 两个概念。
本文将介绍 Custom Elements 的使用指南，重点解释 Shadow DOM 和 HTML Templates 的概念和使用方法。
Shadow DOM
Shadow DOM 是一种将元素的样式和行为封装在一个独立的 DOM 树中的技术。Shadow DOM 中的元素和样式不会影响到主 DOM 树中的其他元素。这种封装允许开发者创建可重用的组件，而不必担心组件中的样式和行为与应用程序中的其他元素产生冲突。
创建 Shadow DOM
创建 Shadow DOM 的第一步是使用 attachShadow 方法将 Shadow DOM 附加到元素上。例如：
class MyElement extends HTMLElement { constructor() { super(); const shadowRoot = this.attachShadow({ mode: 'open' }); } }
在这个例子中，attachShadow 方法创建了一个新的 Shadow DOM，并将其附加到 MyElement 上。mode 参数指定了 Shadow DOM 的模式，可以是 open 或 closed。open 模式表示任何人都可以访问 Shadow DOM 中的元素，而 closed 模式只允许元素的创建者访问 Shadow DOM 中的元素。
将元素添加到 Shadow DOM 中
在创建 Shadow DOM 后，可以使用 appendChild 方法将元素添加到 Shadow DOM 中。例如：
-- -------------------- ---- ------- ----- --------- ------- ----------- - ------------- - -------- ----- ---------- - ------------------- ----- ------ --- ----- - - ---------------------------- ------------- - ------- -------- -------------------------- - -展开代码
在这个例子中，appendChild 方法将一个新的 p 元素添加到 Shadow DOM 中。
从 Shadow DOM 中获取元素
要从 Shadow DOM 中获取元素，可以使用 querySelector 方法。例如：
-- -------------------- ---- ------- ----- --------- ------- ----------- - ------------- - -------- ----- ---------- - ------------------- ----- ------ --- ----- - - ---------------------------- ------------- - ------- -------- -------------------------- ----- -------------- - ------------------------------ - -展开代码
在这个例子中，querySelector 方法从 Shadow DOM 中获取了 p 元素。
HTML Templates
HTML Templates 是一种将 HTML 片段封装在一个可重用的模板中的技术。使用 HTML Templates，开发者可以将 HTML 片段作为一个整体进行处理，而不必将其拆解为多个 DOM 元素。
创建 HTML Templates
要创建 HTML Templates，可以使用 template 标签。例如：
<template id="my-template"> <p>Hello, world!</p> </template>
在这个例子中，template 标签定义了一个模板，其中包含一个 p 元素。
使用 HTML Templates
要使用 HTML Templates，可以使用 importNode 方法将模板的内容导入到文档中。例如：
const template = document.querySelector('#my-template'); const clone = document.importNode(template.content, true); document.body.appendChild(clone);
在这个例子中，importNode 方法将模板的内容导入到文档中，并将其添加到文档的 body 元素中。
Custom Elements
Custom Elements 是将 Shadow DOM 和 HTML Templates 结合起来使用的技术。使用 Custom Elements，开发者可以创建具有自定义行为和样式的元素，并在应用程序中使用它们。
创建 Custom Elements
要创建 Custom Elements，可以定义一个继承自 HTMLElement 的类，并使用 customElements.define 方法将其注册为自定义元素。例如：
-- -------------------- ---- ------- ----- --------- ------- ----------- - ------------- - -------- ----- ---------- - ------------------- ----- ------ --- ----- -------- - --------------------------------------- ----- ----- - ------------------------------------- ------ ------------------------------ - - ----------------------------------- -----------展开代码
在这个例子中，MyElement 类继承自 HTMLElement，并使用 Shadow DOM 和 HTML Templates 创建自定义元素。customElements.define 方法将 MyElement 注册为 my-element 自定义元素。
使用 Custom Elements
要在应用程序中使用 Custom Elements，可以像使用其他 HTML 元素一样使用它们。例如：
<my-element></my-element>在这个例子中，my-element 自定义元素将在文档中创建一个新的 MyElement 实例。
结论
Custom Elements 是一种用于创建自定义 HTML 元素的 API，需要理解 Shadow DOM 和 HTML Templates 两个概念。本文介绍了 Shadow DOM 和 HTML Templates 的概念和使用方法，并演示了如何使用 Custom Elements 创建自定义元素。通过学习本文，开发者可以更好地理解 Custom Elements 的使用方法，并将其应用于实际开发中。
参考文献
- Web Components
- Using templates and slots
- Shadow DOM v1: Self-Contained Web Components
- Custom Elements v1: Reusable Web Components
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/677bb2e05c5a933a3429f1ab
