Web Components 和 Shadow DOM 作为前端开发的两项重要技术，已经被广泛使用并受到开发者的高度评价。本文将通过介绍 Web Components 和 Shadow DOM 的概念、特点和使用方法，让读者能够全面了解它们的功能和优势，为实践项目开发提供帮助和指导。
Web Components
Web Components 是一种由 W3C 提出的标准，旨在使用现有的 Web 技术来创建可重用的自定义元素和组件。它由三个核心技术组成：Custom Elements、Shadow DOM 和 HTML Templates。
Custom Elements
Custom Elements 允许开发者自定义 HTML 元素，以便在其它页面中重复使用。自定义元素可以在 HTML 页面中注册，并通过 JavaScript 实现其行为和样式。
// javascriptcn.com 代码示例
<custom-element></custom-element>
<script>
class CustomElement extends HTMLElement {
constructor() {
super();
// 自定义元素的构造函数
}
}
customElements.define('custom-element', CustomElement);
</script>上面的代码就创建了一个自定义元素，名为 custom-element，并定义了其构造函数。customElements.define() 方法用于将自定义元素与其元素名称进行关联。之后，我们只需在页面中创建 <custom-element> 标签即可使用自定义元素。
Shadow DOM
Shadow DOM 可以使 Web Component 的样式和结构完全独立于页面上的其它元素，避免污染全局样式，提高了组件的可复用性和可维护性。
// javascriptcn.com 代码示例
<template id="custom-component">
<style>
:host {
display: block;
width: 100%;
height: 20px;
padding: 10px;
background-color: #f5f5f5;
}
</style>
<div class="custom-component">
<!-- 这里是 Shadow DOM 中的内容 -->
</div>
</template>
<script>
class CustomComponent extends HTMLElement {
constructor() {
super();
const shadowRoot = this.attachShadow({ mode: 'open' });
const template = document.querySelector('#custom-component');
const clone = document.importNode(template.content, true);
shadowRoot.appendChild(clone);
}
}
customElements.define('custom-component', CustomComponent);
</script>
<custom-component></custom-component>上面的代码展示了如何使用 Shadow DOM 和 HTML Templates 创建自定义组件。CSS 样式代码定义在 Shadow DOM 内，避免对全局样式造成影响。模板中的内容可以在自定义组件中复用。
HTML Templates
HTML Templates 允许开发者创建一段 HTML 来定义自定义组件的结构。
// javascriptcn.com 代码示例
<template id="custom-component">
<style>
:host {
display: block;
width: 100%;
height: 20px;
padding: 10px;
background-color: #f5f5f5;
}
</style>
<div class="custom-component">
<!-- 这里是 Shadow DOM 中的内容 -->
</div>
</template>上面的代码创建了一个 ID 为 custom-component 的 HTML 模板，其中定义了组件的 HTML 结构和 CSS 样式。模板内容可以在自定义组件中复用。
Shadow DOM
Shadow DOM 提供了一种强大的方式来封装 Web Component，它可以使组件中的 HTML 和 CSS 对外部文档隔离，避免来自外部文档的样式和事件影响组件，提高了组件的可复用性和可维护性。
Shadow DOM 的使用方法
Shadow DOM 可以通过 JavaScript API 来实现。
<div id="container"></div>
<script>
const container = document.querySelector('#container');
const shadowRoot = container.attachShadow({ mode: 'open' });
const div = document.createElement('div');
div.innerHTML = '这是 Shadow DOM 中的内容';
shadowRoot.appendChild(div);
</script>上面的代码创建了一个 div 元素，并将其添加到 container 元素的 Shadow DOM 中。可以通过 attachShadow() 方法创建 Shadow DOM，该方法返回一个 shadowRoot 实例，它可以用于添加组件的 DOM 内容。
Shadow DOM 中的样式
Shadow DOM 中的样式通常通过 CSS 样式表来实现。
// javascriptcn.com 代码示例
<template id="custom-component">
<style>
:host {
display: block;
width: 100%;
height: 20px;
padding: 10px;
background-color: #f5f5f5;
}
</style>
<div class="custom-component">
<!-- 这里是 Shadow DOM 中的内容 -->
</div>
</template>
<script>
class CustomComponent extends HTMLElement {
constructor() {
super();
const shadowRoot = this.attachShadow({ mode: 'open' });
const template = document.querySelector('#custom-component');
const clone = document.importNode(template.content, true);
shadowRoot.appendChild(clone);
}
}
customElements.define('custom-component', CustomComponent);
</script>上面的代码展示了如何在 Shadow DOM 中定义 CSS 样式表。通过在 Shadow DOM 中使用 :host 伪类来指定自定义元素的样式，并将样式表添加到 HTML 模板中。在 Shadow DOM 中定义的样式只适用于自定义元素本身，不会影响外部文档的样式。
总结
Web Components 和 Shadow DOM 是现代 Web 开发中非常有用的技术，可以让开发者开发出更加模块化、可复用的组件，并提高了组件的可维护性。通过以上内容的介绍，读者对 Web Components 和 Shadow DOM 的使用可能已有初步的了解，但需要不断地实践和掌握，以便开发出更加高效、强大的组件。
参考代码：https://codepen.io/pen/?template=mdwwxmo
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/654731c77d4982a6eb190588