自定义元素是Web Components核心功能，通过继承HTMLElement并使用customElements.define()注册，可创建可复用、封装性强的自定义标签；需注意标签名含连字符、确保定义后再使用，并推荐Shadow DOM隔离样式，还支持属性监听与原生元素扩展，提升组件化开发效率。
自定义元素是 Web Components 的核心功能之一，允许开发者通过 JavaScript 定义自己的 HTML 标签。使用自定义元素可以封装可复用的组件，提升代码组织性与可维护性。在 JavaScript 中创建自定义元素主要依赖于 CustomElementRegistry 接口，通过 customElements.define() 方法注册新元素。
定义自定义元素的基本步骤
要创建一个自定义元素，需要继承 HTMLElement 基类，并在其中添加所需的行为和结构。
- 创建一个类并继承
HTMLElement - 在构造函数中调用
super()，这是必须的 - 可选：使用 Shadow DOM 封装内部结构与样式
- 通过
customElements.define()注册元素，标签名必须包含连字符（-）
示例代码：
class MyCard extends HTMLElement {
constructor() {
super();
// 创建 Shadow DOM 来隔离样式和结构
this.attachShadow({ mode: 'open' });
this.shadowRoot.innerHTML = `
// 注册自定义元素
customElements.define('my-card', MyCard);
使用方式：
立即学习“Java免费学习笔记（深入）”；
这是一张自定义卡片
支持属性与响应式更新
为了让自定义元素对属性变化做出反应，可以利用静态 getter observedAttributes 和 attributeChangedCallback 方法。
- 在类中定义
static get observedAttributes()返回需监听的属性数组 - 实现
attributeChangedCallback(name, oldVal, newVal)处理变更逻辑 - 可结合
connectedCallback在元素插入 DOM 时初始化状态
示例：支持 title 属性
class MyCard extends HTMLElement {
static get observedAttributes() {
return ['title'];
}
constructor() {
super();
this.attachShadow({ mode: 'open' });
}
connectedCallback() {
this.render();
}
attributeChangedCallback(name, oldVal, newVal) {
if (name === 'title') {
this.render();
}
}
render() {
const title = this.getAttribute('title') || '默认标题';
this.shadowRoot.innerHTML = zuojiankuohaophpcnstyle> .card { border: 1px solid #ddd; padding: 16px; margin: 8px; border-radius: 8px; background: #f9f9f9; } h3 { margin-top: 0; color: #333; } zuojiankuohaophpcn/style> zuojiankuohaophpcndiv class="card"> zuojiankuohaophpcnh3>${title}zuojiankuohaophpcn/h3> zuojiankuohaophpcnslot>zuojiankuohaophpcn/slot> zuojiankuohaophpcn/div> ;
}
}
customElements.define('my-card', MyCard);
使用：
用户名：Alice
内建元素扩展（增强原生标签）
除了创建全新标签，还可以扩展原生 HTML 元素，比如增强按钮或输入框。
方法是：- 继承对应元素的接口，如
HTMLButtonElement - 注册时传入第三个参数
{ extends: 'button' } - 使用时通过
is属性指定行为
示例：扩展 button
class FancyButton extends HTMLButtonElement {
constructor() {
super();
this.addEventListener('click', () => {
alert('点击了炫酷按钮！');
});
}
}
customElements.define('fancy-button', FancyButton, { extends: 'button' });
使用：
这种方式保持语义化的同时增加功能。
注意事项与兼容性
开发时注意以下几点：
- 自定义标签名必须包含连字符，避免与未来 HTML 标准冲突
- 确保在使用前完成元素定义，否则会报错
- Shadow DOM 提供样式隔离，推荐使用以避免污染全局
- 现代浏览器广泛支持，但老版本 IE 不兼容，生产环境建议配合 polyfill 或构建工具处理
基本上就这些。掌握自定义元素后，你可以构建高度封装、可复用的组件，为前端架构提供更强的灵活性。
