自定义元素是Web Components标准中用原生JS定义含短横线标签（如my-button）的HTML扩展机制，需继承HTMLElement、注册后使用，支持shadow DOM封装、属性监听与事件派发。
JavaScript组件化开发的核心是封装可复用、独立运行的UI单元，而自定义元素（Custom Elements）是Web Components标准中最直接的实现方式——它让你用原生JS定义HTML标签，无需框架也能做到“写一次， anywhere 使用”。
什么是自定义元素？
自定义元素是浏览器原生支持的API，允许你创建带有自己名字（必须含短横线，如 my-button）、行为和样式的HTML标签。它基于类语法，继承自 HTMLElement，生命周期清晰，与DOM深度集成。
如何创建一个自定义元素？
分三步：定义类 → 注册元素 → 在HTML中使用。关键细节不能漏：
- 类名必须继承 HTMLElement，且不能有构造函数参数（否则会报错）；
- 构造函数里只能做最小初始化（如 this.attachShadow({mode: 'open'})），不能访问 this.innerHTML 或调用 super() 后操作DOM；
- 注册时标签名必须全小写且含短横线（my-counter ✅，MyCounter ❌，counter ❌）；
- 推荐用 shadow DOM 封装样式和结构，避免全局污染。
示例：一个计数器组件
立即学习“Java免费学习笔记（深入）”；
class MyCounter extends HTMLElement {
constructor() {
super();
this.count = 0;
this.attachShadow({ mode: 'open' });
this.render();
}
render() {
this.shadowRoot.innerHTML = `
<style>button { margin: 4px; }</style>
<button id="decrease">-</button>
<span>${this.count}</span>
<button id="increase">+</button>
`;
this.shadowRoot.getElementById('increase').onclick = () => this.update(1);
this.shadowRoot.getElementById('decrease').onclick = () => this.update(-1);
}
update(delta) {
this.count += delta;
this.shadowRoot.querySelector('span').textContent = this.count;
}
}
customElements.define('my-counter', MyCounter);
之后即可在任意HTML中写：<my-counter></my-counter>
如何让组件更实用？支持属性和响应式更新
自定义元素可通过 attributeChangedCallback 监听属性变化，实现类似Vue/React的props响应能力：
- 在 static get observedAttributes() 中声明要监听的属性名（如 ['count', 'disabled']）；
- 在 attributeChangedCallback(attr, oldVal, newVal) 中处理变更逻辑；
- 设置属性需用 this.setAttribute('count', 5)，或直接修改 this.count = 5 后手动触发更新（不自动同步到HTML属性）；
- 初始属性值可在 connectedCallback 中读取 this.getAttribute('count') 并初始化状态。
如何在项目中合理使用自定义元素？
它不是替代React/Vue的方案，而是补充——适合构建设计系统基础组件、微前端共享UI、或轻量级页面增强：
- 避免在自定义元素内部引入大型第三方库，保持轻量；
- 用 slot 实现内容分发（如 <my-card><h2 slot="title">标题</h2></my-card>）；
- 通过 EventTarget 派发自定义事件（如 this.dispatchEvent(new CustomEvent('change', { detail: this.count }))），供外部监听；
- 配合 HTML Template 标签预存结构，提升可读性与复用性。
不复杂但容易忽略：所有现代浏览器（Chrome/Firefox/Safari/Edge 79+）均已原生支持，无需polyfill。
