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