在现代 Web 开发中，组件化已经成为了一个不可避免的趋势。而 Custom Elements 和 Shadow DOM 则是实现 Web 组件化的两个核心技术。本文将介绍如何使用 Custom Elements 和 Shadow DOM 来开发 Web 组件，并提供示例代码和指导意义。
Custom Elements
Custom Elements 是一个 Web 标准，它允许开发者创建自定义的 HTML 元素，并提供一些自定义的行为。使用 Custom Elements，我们可以将一些重复的 HTML 结构封装成一个自定义元素，从而提高代码的可复用性和可维护性。
定义 Custom Elements
定义 Custom Elements 需要使用 customElements.define 方法。该方法接受两个参数：元素名称和元素类。
-- -------------------- ---- ------- ----- --------- ------- ----------- - ------------- - -------- - ------------------- - -- ------------ - ---------------------- - -- ----------- - ------------------------------ --------- --------- - -- --------- - ----------------- - -- ------------ - - ----------------------------------- -----------展开代码
上面的代码定义了一个名为 my-element 的自定义元素，并继承了 HTMLElement 类。在该类中，我们可以实现一些自定义的行为，比如在元素被插入到文档中时执行一些操作，或者在元素属性变化时更新元素的样式。
使用 Custom Elements
定义好 Custom Elements 后，我们可以在 HTML 中使用它们。
<my-element></my-element>上面的代码就创建了一个名为 my-element 的自定义元素。当该元素被插入到文档中时，它的 connectedCallback 方法会被调用。
示例代码
下面是一个示例代码，它定义了一个名为 my-button 的自定义元素，并提供了 color 和 text 两个属性。
-- -------------------- ---- ------- ----- -------- ------- ----------- - ------------- - -------- ----- ------ - ------------------- ----- ------ --- ----- ------ - --------------------------------- ------------------ - --------------------------- ---------------- - -------------------------- --------------------------- - ------ --- -------------------- - ------ --------- -------- - ------------------------------ --------- --------- - -- ----- --- -------- - --------------------------------------------------- - --------- - ---- -- ----- --- ------- - ------------------------------------------------- - --------- - - - ---------------------------------- ----------展开代码
上面的代码中，我们使用 attachShadow 方法创建了一个 Shadow DOM，并在其中创建了一个 button 元素。在元素属性变化时，我们可以通过 attributeChangedCallback 方法来更新元素的样式和内容。
Shadow DOM
Shadow DOM 是一个 Web 标准，它允许开发者创建一个独立于主文档的 DOM 树，并将其附加到一个元素上。使用 Shadow DOM，我们可以将一些私有的样式和逻辑封装在一个元素内部，从而避免样式和逻辑的冲突。
创建 Shadow DOM
创建 Shadow DOM 需要使用 element.attachShadow 方法。该方法接受一个配置对象，用于指定 Shadow DOM 的模式和样式。
const shadow = element.attachShadow({ mode: 'open' });
上面的代码创建了一个 open 模式的 Shadow DOM，并将其附加到了 element 元素上。
将元素插入 Shadow DOM
在 Shadow DOM 中，我们可以使用标准的 DOM 操作来创建和操作元素。
const div = document.createElement('div'); div.innerText = 'Hello, World!'; shadow.appendChild(div);
上面的代码创建了一个 div 元素，并将其插入到了 Shadow DOM 中。
示例代码
下面是一个示例代码，它创建了一个名为 my-input 的自定义元素，并使用 Shadow DOM 将输入框和标签封装到了一个元素内部。
-- -------------------- ---- ------- ----- ------- ------- ----------- - ------------- - -------- ----- ------ - ------------------- ----- ------ --- ----- ----- - -------------------------------- --------------- - --------------------------- ------------------------- --------- ----- ----- - -------------------------------- ------------------------ --------- -------------------------- -------- -------------------------- -------------------------- - - --------------------------------- ---------展开代码
上面的代码中，我们创建了一个 label 元素和一个 input 元素，并将它们插入到了 Shadow DOM 中。在 HTML 中使用该元素时，我们可以通过 label 属性设置输入框的标签。
<my-input label="Name"></my-input>
结语
本文介绍了如何使用 Custom Elements 和 Shadow DOM 来开发 Web 组件，并提供了示例代码和指导意义。这两个技术可以帮助开发者更好地封装和组织代码，提高代码的可复用性和可维护性。如果你正在开发 Web 应用程序，不妨尝试一下这两个技术，相信它们会给你带来很多帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67cd35bde46428fe9e69f727
