HTML5自定义元素怎么用？HTML4能自定义标签吗

积累知识，胜过积蓄金银！毕竟在文章开发的过程中，会遇到各种各样的问题，往往都是一些细节知识点还没有掌握好而导致的，因此基础知识点的积累是很重要的。下面本文《HTML5自定义元素怎么用？HTML4能自定义标签吗》，就带大家讲解一下知识点，若是你对本文感兴趣，或者是想搞懂其中某个知识点，就请你继续往下看吧~

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 = `<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 已执行（脚本顺序或放在