HTML组件化演进：从原生标签扩展到自定义元素的设计思路-html教程-PHP中文网

因为div没有语义、行为和生命周期，仅是无功能的容器；重复使用导致样式难维护、交互需手动操作DOM、跨项目复用性差，真正需解决的是让封装代码被浏览器原生识别、开发者直觉理解及工具链自然支持。

html组件化演进：从原生标签扩展到自定义元素的设计思路

为什么不能直接用 `div` 做组件？

因为 div 没有语义、没有行为、没有生命周期，它只是个容器。当你反复写


标题
内容

，改样式要全局搜，加交互要手动查 DOM，换项目还得重写一遍。

真正的问题不是“怎么封装”，而是“怎么让封装后的代码能被浏览器原生识别、被开发者直觉理解、被工具链自然支持”。所以演进方向很明确：从借用现有标签（比如用 button + is），到定义专属标签（比如）。

`is` 属性不是语法糖，是语义桥接的关键

你写，浏览器仍把它当作 HTMLButtonElement 实例——这意味着它天然支持表单提交、disabled 属性、键盘回车触发、屏幕阅读器识别为按钮。如果你直接写，哪怕逻辑一模一样，它默认就是 HTMLElement，不参与表单、不响应空格键、无障碍属性得自己补。

使用 is 的前提是注册时指定 { extends: 'button' }：

class LoadingButton extends HTMLButtonElement {
  constructor() {
    super();
  }
  connectedCallback() {
    this.addEventListener('click', () => {
      this.disabled = true;
      this.textContent = '加载中…';
    });
  }
}
customElements.define('loading-button', LoadingButton, { extends: 'button' });

注意点：

constructor 必须调用 super()，否则原生行为会丢失
不能在 constructor 里操作 DOM（此时元素尚未插入文档），交互逻辑应放在 connectedCallback
IE 完全不支持 is，现代项目若需兼容旧环境，只能退回到 autonomous 元素 + 手动模拟语义

自定义标签名必须含连字符，这不是风格问题

浏览器靠这个区分原生标签和自定义标签：my-button 合法，mybutton 或 MyButton 会直接报错 Failed to execute 'define' on 'CustomElementRegistry': The name must contain a dash。

使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审

使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。

下载

命名不是随便起的，它直接影响可读性和维护性：

前缀建议统一（如 ui-、app-），避免团队内不同人注册 button-x 和 x-button 冲突
不要用纯数字开头（3d-model 不合法），也不要包含大写字母（MyButton 不合法）
名字要反映职责，而不是实现方式；collapsible-panel 比 shadow-wrapper 更易懂

Shadow DOM 不是必选项，但它是隔离性的分水岭

你可以只定义一个 class MyCard extends HTMLElement，在 connectedCallback 里拼字符串塞进 this.innerHTML，它也能工作。但它和页面其他 CSS 是裸连的——别人写了个 h2 { color: red; }，你的卡片标题就变红了。

加一层 Shadow DOM 就彻底断开：

constructor() {
  super();
  const shadow = this.attachShadow({ mode: 'open' });
  shadow.innerHTML = `
    <style>h2 { color: var(--card-title-color, #333); }</style><h2><slot name="title"></slot></h2>
    <div><slot></slot></div>
  `;
}

关键事实：