HTML组件化发展历程：原生标签如何演变至自定义元素的设计理念？
- 内容介绍
- 文章标签
- 相关推荐
本文共计1030个文字，预计阅读时间需要5分钟。
因为没有语义、没有行为、没有生命周期，它只是一个容器。当你重复写时，它仍然只是一个容器。
真正的问题不是“怎么封装”，而是“怎么让封装后的代码能被浏览器原生识别、被开发者直觉理解、被工具链自然支持”。所以演进方向很明确：从借用现有标签（比如用 button + is），到定义专属标签（比如 <user-card>）。
is 属性不是语法糖，是语义桥接的关键
你写 <button is="loading-button">提交</button>，浏览器仍把它当作 HTMLButtonElement 实例——这意味着它天然支持表单提交、disabled 属性、键盘回车触发、屏幕阅读器识别为按钮。如果你直接写 <loading-button>，哪怕逻辑一模一样，它默认就是 HTMLElement，不参与表单、不响应空格键、无障碍属性得自己补。
本文共计1030个文字，预计阅读时间需要5分钟。
因为没有语义、没有行为、没有生命周期，它只是一个容器。当你重复写时，它仍然只是一个容器。
真正的问题不是“怎么封装”，而是“怎么让封装后的代码能被浏览器原生识别、被开发者直觉理解、被工具链自然支持”。所以演进方向很明确：从借用现有标签（比如用 button + is），到定义专属标签（比如 <user-card>）。
is 属性不是语法糖，是语义桥接的关键
你写 <button is="loading-button">提交</button>，浏览器仍把它当作 HTMLButtonElement 实例——这意味着它天然支持表单提交、disabled 属性、键盘回车触发、屏幕阅读器识别为按钮。如果你直接写 <loading-button>，哪怕逻辑一模一样，它默认就是 HTMLElement，不参与表单、不响应空格键、无障碍属性得自己补。