HTML5的Custom Elements怎么用？HTML4能自定义标签吗？

HTML5 的 Custom Elements 通过 `customElements.define()` 提供了真正语义化、可封装、具备原生生命周期的自定义标签能力——必须继承 `HTMLElement`、名称含短横线，并依托 shadow DOM 实现样式与逻辑隔离；而 HTML4 完全不支持自定义标签语义，未知标签仅被当作无行为的 `HTMLUnknownElement` 甚至被老浏览器忽略，无法触发生命周期、绑定逻辑或保障一致性。尽管主流浏览器已普遍兼容，但 Safari、Firefox 和 Chrome 在扩展内置元素、shadow DOM 支持等方面仍存在细节差异；相比简单的 `div+class` 模拟，Custom Elements 不仅提升可访问性与工具链识别度，更从底层支撑现代 Web 组件生态——真正的挑战不在注册语法，而在于设计健壮的属性契约、无障碍体验与服务端渲染协同。

HTML5 的 customElements.define() 怎么注册一个自定义元素

必须继承 HTMLElement 或其子类，不能直接用空对象；注册名必须包含短横线（-），比如 my-button 合法，mybutton 会报错。

常见写法：

class MyButton extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `<button><slot></slot></button>`;
  }
}
customElements.define('my-button', MyButton);

注意点：

• constructor 中必须先调 super()，否则报 Failed to construct 'HTMLElement': Please use the 'new' operator
• 不能在 connectedCallback 里反复调 this.attachShadow()，否则重复挂载会失败
• 若用 document.createElement('my-button') 创建，需确保 define 已执行（脚本顺序或放在