HTML5 customElements.define()注册自定义元素须继承HTMLElement、名称含短横线；HTML4不支持自定义标签语义，仅作未知元素处理；主流浏览器兼容但有细节差异；相比div+class，custom element提供语义化、封装性与原生生命周期。
HTML5 的 customElements.define() 怎么注册一个自定义元素
必须继承 HTMLElement 或其子类，不能直接用空对象；注册名必须包含短横线（-），比如 my-button 合法，mybutton 会报错。
常见写法：
class MyButton extends HTMLElement {
constructor() {
super();
this.attachShadow({ mode: 'open' });
this.shadowRoot.innerHTML = ``;
}
}
customElements.define('my-button', MyButton);
注意点：
-
constructor中必须先调super()，否则报Failed to construct 'HTMLElement': Please use the 'new' operator - 不能在
connectedCallback里反复调this.attachShadow()，否则重复挂载会失败 - 若用
document.createElement('my-button')创建，需确保define已执行（脚本顺序或放在里）
HTML4 能不能自定义标签（比如写个 直接用）
不能。HTML4 没有规范支持自定义标签语义，浏览器遇到未知标签会：
立即学习“前端免费学习笔记（深入）”；
- 当成
HTMLUnknownElement（不是HTMLElement子类） - 不触发任何生命周期回调（
connectedCallback等全无效） - CSS 中
my-tag { display: block }可能生效，但无法绑定行为、无法封装逻辑 - 部分老 IE 甚至不生成 DOM 节点，直接忽略标签内容
即使强行用 document.createElement('my-tag') 在 IE8+ 注册，也只是让标签“存在”，仍无自定义能力——这和 HTML5 的 customElements 完全不同。
自定义元素在 Safari / Firefox / Chrome 的兼容性差异
主流浏览器都支持，但细节有坑：
- Safari 10.1+ 支持，但早期版本（如 10.0）不支持
customElements.define()的第三个参数（{ extends: 'button' }） - Firefox 63+ 才完整支持
shadowRoot和 - Chrome 54+ 开始支持，但若用
is="xxx"语法（如），需显式传{ extends: 'button' }，且仅适用于内置标签扩展
检查是否可用：
if ('customElements' in window) {
// 安全使用
}
为什么不能用 div + class 模拟，非要用 custom element
核心区别在封装边界和语义表达：
-
