使用Web Components可创建独立可复用的自定义元素，1. 通过继承HTMLElement并用customElements.define()注册组件；2. 利用影子DOM实现样式和结构隔离；3. 结合template标签提升代码组织性与性能；4. 使用slot插入外部内容以增强灵活性；5. 通过observedAttributes和attributeChangedCallback响应属性变化。该技术不依赖框架，适合构建跨项目UI库，需注意浏览器兼容性。
使用 Web Components 构建可复用的自定义 HTML 元素，核心在于利用浏览器原生支持的几项技术：自定义元素（Custom Elements）、影子 DOM（Shadow DOM）和 HTML 模板（template）。通过它们可以封装样式、结构和行为，实现真正独立、可复用的组件。
定义自定义元素
要创建一个可复用的自定义元素，首先需要继承 HTMLElement 并通过 customElements.define() 注册。元素名称必须包含连字符（-），以避免与原生 HTML 标签冲突。
例如：class MyButton extends HTMLElement {
constructor() {
super();
this.textContent = this.getAttribute('label') || '点击我';
this.style.padding = '10px 20px';
this.style.backgroundColor = '#007bff';
this.style.color = 'white';
this.style.borderRadius = '4px';
this.style.display = 'inline-block';
this.style.cursor = 'pointer';
}
connectedCallback() {
this.addEventListener('click', () => {
alert('按钮被点击！');
});
}
}
customElements.define('my-button', MyButton);
之后就可以在 HTML 中使用：<my-button label="提交"></my-button>
使用影子 DOM 封装样式和结构
为了让组件样式不被外部影响，也防止组件内部样式泄漏到全局，应使用影子 DOM。在构造函数中调用 this.attachShadow({ mode: 'open' }) 创建影子根。
立即学习“前端免费学习笔记（深入）”；
改进后的例子：class MyCard extends HTMLElement {
constructor() {
super();
const shadow = this.attachShadow({ mode: 'open' });
const wrapper = document.createElement('div');
const title = document.createElement('h3');
const content = document.createElement('p');
title.textContent = this.getAttribute('title') || '默认标题';
content.textContent = this.getAttribute('content') || '这是内容';
const style = document.createElement('style');
style.textContent = `
div {
border: 1px solid #ddd;
border-radius: 8px;
padding: 16px;
background: #f9f9f9;
font-family: sans-serif;
}
h3 { color: #333; margin-top: 0; }
p { color: #555; }
`;
wrapper.appendChild(title);
wrapper.appendChild(content);
shadow.appendChild(style);
shadow.appendChild(wrapper);
}
}
customElements.define('my-card', MyCard);
现在这个卡片组件的样式完全隔离，不会受页面其他 CSS 影响。
结合 template 提高可维护性
对于结构较复杂的组件，推荐使用 <template> 标签预定义 DOM 结构，提升代码组织性和性能。
HTML 中定义模板：<template id="my-modal-template">
<style>
.modal {
display: none;
position: fixed;
top: 0; left: 0;
width: 100%; height: 100%;
background: rgba(0,0,0,0.5);
align-items: center;
justify-content: center;
}
.modal.active {
display: flex;
}
.modal-content {
background: white;
padding: 20px;
border-radius: 8px;
max-width: 500px;
}
</style>
<div class="modal">
<div class="modal-content">
<slot></slot>
</div>
</div>
</template>
JS 中使用模板：
class MyModal extends HTMLElement {
constructor() {
super();
const template = document.getElementById('my-modal-template');
const content = template.content.cloneNode(true);
this.shadowRoot = this.attachShadow({ mode: 'open' });
this.shadowRoot.appendChild(content);
this.modal = this.shadowRoot.querySelector('.modal');
}
show() {
this.modal.classList.add('active');
}
hide() {
this.modal.classList.remove('active');
}
}
customElements.define('my-modal', MyModal);
通过 slot 可以让使用者传入自定义内容，增强灵活性。
监听属性变化响应更新
如果希望组件对属性变化做出反应，可以使用 static get observedAttributes() 定义需监听的属性，并实现 attributeChangedCallback 方法。
示例：class MyInput extends HTMLElement {
static get observedAttributes() {
return ['value', 'disabled'];
}
attributeChangedCallback(name, oldValue, newValue) {
if (name === 'value') {
this.input.value = newValue;
}
if (name === 'disabled') {
this.input.disabled = newValue !== null;
}
}
constructor() {
super();
this.attachShadow({ mode: 'open' });
this.input = document.createElement('input');
this.shadowRoot.appendChild(this.input);
}
}
customElements.define('my-input', MyInput);
这样当设置 <my-input value="测试" disabled></my-input> 时，组件会自动更新状态。
基本上就这些。Web Components 不依赖任何框架，适合构建跨项目、跨团队使用的 UI 组件库。虽然功能强大，但要注意浏览器兼容性，必要时引入 polyfill。关键是合理封装、暴露清晰 API，才能真正实现“一次编写，到处复用”。
