在开发现代 Web 应用程序时，使用 Web 组件成为了一个快捷有效的方式。Web 组件是一种可重用的自定义元素，可用于创建功能强大且易于维护的交互式组件。 Custom Elements 和 Shadow DOM 技术是实现 Web 组件的两个核心技术，它们允许开发人员创建自定义元素和将其封装起来以避免与其他元素发生冲突。
本文将讨论使用 Custom Elements 和 Shadow DOM 创建 Web 组件的方法，包括创建自定义元素、组合 Web 组件、创建样式隔离的 Shadow DOM 和为 Web 组件添加事件处理程序等。我们还将提供示例代码进行演示，以便让你更好地理解如何使用 Custom Elements 和 Shadow DOM 构建 Web 组件。
自定义元素
Custom Elements 是一种允许开发人员创建自定义 HTML 标签的技术，这些标签可以拥有自己的属性和方法。通过扩展 HTMLElement 类，可以自定义一个 Web 组件并注册它，使其可用于 Web 页面中。
下面是一个简单的自定义元素示例，它表示一个带有属性和方法的自定义按钮组件：
<!-- 定义自定义元素 -->
<my-button id="example-button" disabled>Click me!</my-button>
<script>
// 继承自定义元素类
class MyButton extends HTMLElement {
constructor() {
super();
// 创建 Shadow DOM 放置组件样式
const shadowRoot = this.attachShadow({ mode: 'open' });
// 定义组件模板
shadowRoot.innerHTML = `
<style>
button {
background: #3f51b5;
border: none;
color: #fff;
font-size: 16px;
padding: 8px 16px;
border-radius: 4px;
cursor: pointer;
}
button:hover {
background: #303f9f;
}
button[disabled] {
opacity: 0.5;
cursor: not-allowed;
}
</style>
<button></button>
`;
// 获取组件内部的 button 元素
this.button = shadowRoot.querySelector('button');
// 设置属性和方法
this.disabled = this.hasAttribute('disabled');
}
get disabled() {
return this.button.disabled;
}
set disabled(value) {
if (value) {
this.button.setAttribute('disabled', '');
} else {
this.button.removeAttribute('disabled');
}
}
// 添加事件处理程序
connectedCallback() {
this.addEventListener('click', () => {
console.log('Button clicked!');
});
}
// 取消事件处理程序
disconnectedCallback() {
this.removeEventListener('click', () => {
console.log('Button clicked!');
});
}
}
// 注册自定义元素
customElements.define('my-button', MyButton);
</script>在这个示例中，我们使用 class 关键字定义了一个 MyButton 类，它继承了 HTMLElement 并创建了一个 Shadow DOM 来隔离样式和内部元素。此外，我们还定义了 disabled 属性和 connectedCallback() 方法，前者可以控制组件的禁用状态，而后者在组件插入文档时添加了一个点击事件处理程序。
需要注意的是，注册自定义元素时，必须指定一个名称，这个名称不能与现有的 HTML 元素名称重复。
组合 Web 组件
除了创建单个自定义元素之外，我们也可以使用多个自定义元素组合成更大、更复杂的 Web 组件。例如，以下示例将 MyButton 自定义元素包含在 MyForm 自定义元素中，以创建一个包含表单的 Web 组件。
<my-form>
<my-button id="submit-button">Submit</my-button>
</my-form>
<script>
class MyForm extends HTMLElement {
constructor() {
super();
const shadowRoot = this.attachShadow({ mode: 'open' });
shadowRoot.innerHTML = `
<style>
form {
margin: 0;
padding: 16px;
border: 1px solid #ccc;
border-radius: 4px;
}
</style>
<form>
<slot></slot>
</form>
`;
}
}
customElements.define('my-form', MyForm);
</script>在这个示例中，我们定义了一个 MyForm 类来表示表单组件的外部元素，其中包含了一个 form 元素和一个插槽元素 <slot>，可以在组件的内部插入其他自定义元素。这样，使用组合 Web 组件的方式可以让我们更好地抽象出可重用的 UI 组件。
Shadow DOM 样式隔离
在上述示例中，我们使用了 Shadow DOM 来隔离组件的样式、模板和行为，有助于解决样式冲突和组件可重用性的问题。 Shadow DOM 可以使组件内部的样式不会影响到外部，同时也避免了外部样式的干扰。
以下是自定义元素的 Shadow DOM 样式隔离示例：
<!-- 外部样式 -->
<style>
button {
font-size: 20px;
color: red;
}
</style>
<!-- 自定义元素 -->
<my-button>Click me!</my-button>
<script>
class MyButton extends HTMLElement {
constructor() {
super();
const shadowRoot = this.attachShadow({ mode: 'open' });
shadowRoot.innerHTML = `
<style>
button {
background: #3f51b5;
border: none;
color: #fff;
font-size: 16px;
padding: 8px 16px;
border-radius: 4px;
cursor: pointer;
}
button:hover {
background: #303f9f;
}
</style>
<button></button>
`;
}
}
customElements.define('my-button', MyButton);
</script>在这个示例中，我们定义了一个外部样式表中的 button 元素，它具有不同的字体大小和颜色。但是当我们插入 MyButton 组件时，它的样式不会受到外部样式的影响，因为 button 元素在 Shadow DOM 内部定义，并且样式仅适用于组件内部的元素。
为 Web 组件添加事件处理程序
最后一个示例将展示如何为自定义元素添加事件处理程序，以实现交互式功能。在下面的示例中，我们将在按钮组件中添加一个 click 事件处理程序，并在点击时输出一条控制台消息。
<my-button id="example-button">Click me!</my-button>
<script>
class MyButton extends HTMLElement {
constructor() {
super();
const shadowRoot = this.attachShadow({ mode: 'open' });
shadowRoot.innerHTML = `
<style>
button {
background: #3f51b5;
border: none;
color: #fff;
font-size: 16px;
padding: 8px 16px;
border-radius: 4px;
cursor: pointer;
}
button:hover {
background: #303f9f;
}
button[disabled] {
opacity: 0.5;
cursor: not-allowed;
}
</style>
<button></button>
`;
this.button = shadowRoot.querySelector('button');
// 添加 click 事件处理程序
this.addEventListener('click', () => {
console.log('Button clicked!');
});
}
}
customElements.define('my-button', MyButton);
</script>当用户点击上面的按钮时，它会触发 click 事件处理程序，输出一条控制台消息 Button clicked!。这样，我们就可以通过添加事件处理程序来构建交互式 UI 组件。
总结
Custom Elements 和 Shadow DOM 是实现 Web 组件的两个重要技术，它们为开发人员创建具有可重用性和模块化特性的 Web 组件提供了强大的工具。本文介绍了使用 Custom Elements 和 Shadow DOM 创建 Web 组件的方法，并提供了示例代码进行演示，希望读者可以学习并掌握这些技术，用于构建更好的 Web 应用程序。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65b742a2add4f0e0fffd5c17