自定义元素是Web组件的核心，通过JavaScript的customElements.define()方法可创建独立或扩展原生元素的组件，结合Shadow DOM实现样式与结构隔离，利用observedAttributes和attributeChangedCallback响应属性变化，从而构建高内聚、低耦合、不依赖框架的可复用Web组件。
Web组件是一套允许开发者创建可重用、封装良好的自定义HTML元素的技术，而JavaScript在其中扮演核心角色。它让前端开发不再依赖框架就能实现组件化。自定义元素是Web组件的基石之一，通过JavaScript可以定义自己的HTML标签，并赋予其行为和结构。
什么是自定义元素？
自定义元素是Web平台的一部分，允许你定义新的HTML标签。这些标签可以像原生元素一样使用，同时拥有自己的逻辑和状态。浏览器通过customElements.define()方法注册新元素，该元素必须继承自HTMLElement或其子类。
例如，你可以创建一个名为<my-button>的按钮组件：
class MyButton extends HTMLElement {constructor() {
super();
this.textContent = "点击我";
this.style.padding = "10px";
this.style.background = "#007bff";
this.style.color = "white";
this.style.borderRadius = "4px";
this.addEventListener("click", () => {
alert("按钮被点击了！");
});
}
}
customElements.define("my-button", MyButton);
之后就可以在HTML中直接使用：<my-button></my-button>。
立即学习“Java免费学习笔记（深入）”；
自定义元素的类型
有两种类型的自定义元素：
- 自治自定义元素（Autonomous custom elements）：完全独立的新元素，继承自HTMLElement，比如上面的my-button。
- 定制内置元素（Customized built-in elements）：扩展已有HTML元素的功能。需要在define()时指定第三个参数{ extends: 'button' }，然后通过is属性使用。
例如，扩展原生按钮：
class FancyButton extends HTMLButtonElement {connectedCallback() {
this.style.fontSize = "18px";
this.style.background = "linear-gradient(blue, purple)";
}
}
customElements.define("fancy-button", FancyButton, { extends: "button" });
使用方式为：<button is="fancy-button">炫彩按钮</button>。
结合Shadow DOM实现封装
真正让Web组件强大的是Shadow DOM。它可以将样式和结构隔离于主文档之外，避免全局污染。
在构造函数中调用this.attachShadow({ mode: 'open' })即可启用Shadow DOM。
class UserProfile extends HTMLElement {constructor() {
super();
this.shadow = this.attachShadow({ mode: "open" });
const name = this.getAttribute("name") || "匿名用户";
this.shadow.innerHTML = `
<style>
.card { border: 1px solid #ddd; padding: 16px; border-radius: 8px; }
.name { font-size: 1.2em; color: #333; }
</style>
<div class="card">
<div class="name">${name}</div>
</div>
`;
}
}
customElements.define("user-profile", UserProfile);
现在每个<user-profile name="张三"></user-profile>都有独立样式，不会影响页面其他部分。
响应属性变化
为了让组件更灵活，通常需要监听属性变化。可以通过静态getterobservedAttributes指定要监控的属性，并实现attributeChangedCallback方法。
static get observedAttributes() {return ["name", "level"];
}
attributeChangedCallback(name, oldValue, newValue) {
if (name === "name") {
this.shadow.querySelector(".name").textContent = newValue;
}
}
这样当外部修改name属性时，组件会自动更新显示内容。
基本上就这些。用好自定义元素加Shadow DOM，就能写出不依赖框架、高内聚、低耦合的组件。虽然没有React那样的JSX语法糖，但胜在标准、轻量、兼容现代浏览器。适合构建设计系统、工具库或渐进式增强项目。
