HTML5引入的Custom Elements是Web Components标准的核心部分，它允许开发者创建符合语义且可复用的自定义HTML标签。与之相对，HTML4时代并没有任何关于自定义标签的规范，浏览器只会把不认识的标签解析为未知元素节点，无法赋予其脚本行为和生命周期管理。下面我们通过具体用法和对比来厘清两者的区别。
一、HTML5中Custom Elements的基本用法
在HTML5环境下，使用Custom Elements的第一步是编写一个继承自HTMLElement的类，并在其中定义标签的行为。这个类可以重写多个生命周期回调函数，例如connectedCallback在元素插入文档时触发，disconnectedCallback在元素移除时触发，attributeChangedCallback在observedAttributes指定的属性变化时触发。
随后需要调用customElements.define方法完成注册。注意自定义元素名称必须包含至少一个短横线，这是规范强制要求，用以防止与未来标准标签冲突。注册之后，就可以在HTML中像使用原生标签一样书写该自定义元素，浏览器会自动实例化对应的类。
// 定义一个简单的自定义元素
class MyButton extends HTMLElement {
constructor() {
super();
this.addEventListener('click', () => {
alert('自定义按钮被点击');
});
}
connectedCallback() {
this.textContent = '我是自定义按钮';
this.style.border = '1px solid #333';
}
}
// 注册元素，名称必须含短横线
customElements.define('my-button', MyButton);
在HTML页面里直接使用即可：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> </head> <body> <my-button></my-button> </body> </html>
这种方式的优势在于标签行为封装在类内部，页面结构清晰，且能被多个页面复用。缺点是旧浏览器需要polyfill支持，同时开发者要理解生命周期以免内存泄漏。
二、HTML4能否自定义标签
严格来说，HTML4规范中不存在自定义标签的概念。如果在HTML4文档里写入类似<my-tag>的标签，浏览器解析器会将其视为未知元素。未知元素在DOM树中确实存在节点，但没有任何默认样式，也不会关联任何脚本逻辑，更没有生命周期回调可用。
有人通过在HTML4中借用document.createElement来生成陌生标签名，并手动挂载事件，表面上看起来像自定义标签。但这只是DOM API的宽松处理，并非HTML4规范支持，且在不同浏览器中渲染和行为并不一致。比如某些IE版本会将未知标签当作行内元素且不承认其闭合，导致布局错乱。
// HTML4时代模拟自定义标签的笨办法
var el = document.createElement('my-tag');
el.innerHTML = '测试文本';
document.body.appendChild(el);
// 仅能手动加事件，无生命周期概念
el.onclick = function() { alert('clicked'); };
由此可见，HTML4并没有原生自定义标签能力，所谓使用只是黑客式兼容。真正规范、可维护的方案必须建立在HTML5的Custom Elements之上。
三、Custom Elements进阶特性
除了基础生命周期，Custom Elements还支持属性观察。通过在类里声明static get observedAttributes返回属性名数组，就能监听这些属性的变化并作出响应。这让自定义标签可以像原生input的value一样，通过特性驱动视图更新。
另外，自定义元素可以配合Shadow DOM实现样式隔离，避免全局CSS污染。在构造函数中调用attachShadow并写入模板，组件的内部的样式和结构都不会泄漏到外部文档。这种组合正是现代前端组件库底层常用的技术路线。
class UserCard extends HTMLElement {
static get observedAttributes() {
return ['name'];
}
constructor() {
super();
const shadow = this.attachShadow({ mode: 'open' });
shadow.innerHTML = '<style>span{color:red}</style><span></span>';
}
attributeChangedCallback(attr, oldVal, newVal) {
if (attr === 'name') {
this.shadowRoot.querySelector('span').textContent = newVal;
}
}
}
customElements.define('user-card', UserCard);
上述代码注册了带属性观察和Shadow DOM的卡片组件，当页面上修改user-card的name特性时，内部文字自动刷新。这种模式既保留了HTML声明式写法，又具备框架级组件能力，是HTML5带给开发者的实质性升级。
四、开发中的注意事项
自定义元素名称务必遵守短横线规则，且不要使用保留前缀如xml或svg。若define重复注册同名元素，浏览器会抛出错误，因此注册前可用customElements.whenDefined做存在性判断。
在涉及表单关联、可访问性时，自定义元素默认不会参与原生表单提交，需要额外实现ElementInternals接口或使用表单代理。此外，服务端渲染场景要考虑自定义元素在未执行脚本时的降级展示，防止内容不可见影响SEO与首屏体验。
| 对比维度 | HTML5 Custom Elements | HTML4未知标签 |
|---|---|---|
| 规范支持 | Web Components标准 | 无，仅解析容错 |
| 生命周期 | 有回调机制 | 无 |
| 样式隔离 | 可结合Shadow DOM | 不支持 |
| 复用性 | 高，类封装 | 低，手动粘合 |
综合来看，HTML5的Custom Elements为前端组件化提供了浏览器原生的干净路径，而HTML4并不具备自定义标签的真正能力。新项目应直接使用HTML5标准，老系统升级时也建议逐步迁移到自定义元素方案以降低长期维护成本。
Custom_ElementsWeb_ComponentsHTML4修改时间：2026-08-08 06:06:27