Custom Elements 是 Web Components 规范的一部分，用于创建带短横线命名（如 hello-world）并继承 HTMLElement 的可复用自定义标签，需通过 customElements.define() 注册，支持属性监听与生命周期回调，现代浏览器原生支持。
Custom Elements 是 Web Components 规范的一部分，允许你创建可复用、封装良好的自定义 HTML 标签（比如 <my-button> 或 <date-picker>），它们能像原生标签一样被浏览器识别和使用。
Custom Elements 的核心要求
要被浏览器认可为合法的自定义元素，必须满足两个硬性条件：
- 名称中必须包含一个短横线（
-），例如user-card、loading-spinner；不能是单个单词（如mydiv）或纯数字开头； - 必须通过
customElements.define()注册，且传入的类需继承自HTMLElement（或其子类，如HTMLButtonElement）。
定义一个基础 Custom Element
以下是一个最简但完整的例子：定义一个显示欢迎语的 <hello-world> 标签：
class HelloWorld extends HTMLElement {
connectedCallback() {
this.textContent = 'Hello, Custom Element!';
}
}
customElements.define('hello-world', HelloWorld);
在 HTML 中即可直接使用：<hello-world></hello-world>。浏览器会自动调用 connectedCallback，插入文本内容。
立即学习“前端免费学习笔记（深入）”；
支持属性与响应式更新
自定义元素可以监听属性变化，实现类似原生标签的响应能力。例如让 <hello-world name="Alice"> 显示不同名字：
- 在类中定义
static get observedAttributes()，返回要监听的属性名数组（如['name']）； - 实现
attributeChangedCallback(attrName, oldValue, newValue)，在属性变更时更新内容； - 首次渲染建议仍在
connectedCallback中处理，确保初始状态正确。
注意兼容性与最佳实践
现代主流浏览器（Chrome、Firefox、Safari、Edge）均已原生支持 Custom Elements v1。若需支持旧版 IE，需引入 polyfill（如 @webcomponents/custom-elements）。另外建议：
- 避免在构造函数（
constructor）中操作 DOM 或读取属性——此时元素尚未挂载，this.innerHTML不可用； - 使用 Shadow DOM 封装样式和结构，防止外部 CSS 干扰（可选但推荐）；
- 为元素添加合适的 ARIA 属性，提升可访问性。
