customElements 不适合原型开发，因其需预注册、Shadow DOM 隔离样式、属性传值繁琐；原型应优先使用语义化原生标签（如 role、data-*、template）实现快速迭代与调试。
直接用
注册自定义标签做原型，效率远不如纯语义化 HTML 标签快；真要快速搭原型，别碰 Web Components —— 它们适合封装、复用、长期维护，不适合“10 分钟出个可点可拖的 demo”。
为什么 customElements 不适合原型阶段
原型核心诉求是“改得快、看得清、传得走”，而自定义元素天然带三重延迟：
必须在 HTML 使用前执行，JS 加载顺序稍错就白屏或报
Shadow DOM 默认隔离样式，你写个
，想临时加
调试？根本不起作用，得进影子树里找
所有动态内容（比如用户头像、消息数）都得靠属性传入或 slot 分发，没法像
customElements.define()customElements.define()DOMException: "x-foo" is not a valid custom element nameborder: 1px solid red
那样随手加个
data-
属性留接口
真正适合原型的“自定义标签”其实是语义化原生标签
所谓“自定义”，在原型期指的不是注册新标签名，而是用已有标签组合出业务含义 —— 这才是浏览器原生支持、零成本、可调试的方案：
用
section[role="profile"]
用
dataset.status
把按钮逻辑先写死：
attributeChangedCallback
响应快十倍
需要“组件感”？用
document.getElementById('card-template').content.cloneNode(true)
手动插入 —— 不注册、不监听、不封装，只复用 HTML 片段
什么时候该切到真正的 customElements
当原型验证通过、功能稳定、开始多人协作或需要跨项目复用时，才值得把高频模块升级为自定义元素。迁移路径很明确：
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
下载
立即学习
“
前端免费学习笔记（深入）
”；
从
...
提炼出结构和行为，抽成
class DatePicker extends HTMLElement
把原来写在全局 CSS 里的
.date-picker input
搬进 Shadow DOM 的