原生 web components 是浏览器已支持多年的正式标准，无需构建工具即可使用；必须用短横线命名、在 constructor 中仅调用 super() 和 attachshadow、在 connectedcallback 中初始化，且 customelements.define() 需提前执行并避免重复注册。
原生 Web Components 不是“可选方案”，而是浏览器已支持多年、无需构建工具就能用的正式标准。只要写对 customElements.define()、命名合规、生命周期用对位置，就能直接在 HTML 里写 <date-picker></date-picker> —— 它不是模拟，就是真实 DOM 元素。
自定义标签名为什么必须带短横线？
浏览器靠这个字符区分原生标签和自定义元素。不带短横线（比如 mybutton 或 MyButton）会直接抛错：Failed to execute 'define' on 'CustomElementRegistry': The name must contain a hyphen。
-
user-profile✅ 合法：小写 + 短横线 + 非保留名 -
my_button❌ 下划线不识别，等同于无效名 -
div、slot、class❌ 所有原生标签名、全局属性名禁止注册，哪怕加了短横线也不行 - 大小写敏感：
<user-profile></user-profile>和<user-profile></user-profile>是两个不同标签，HTML 中必须全小写使用
constructor 里只能干三件事
很多报错（比如 NotSupportedError: Failed to execute 'attachShadow' on 'HTMLElement'）都源于在 constructor 里做了不该做的事。此时元素尚未挂载，DOM 还不可操作。
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
- 必须调用
super() - 可创建 Shadow DOM：
this.attachShadow({ mode: 'open' }) - 可初始化私有字段或绑定方法：
this._clickHandler = this._handleClick.bind(this) - 不能读取属性：
this.getAttribute('label')返回null - 不能设置 innerHTML 或插入子节点
- 不能注册事件监听器（
this.addEventListener会失效）
connectedCallback 是渲染和初始化的唯一安全位置
元素真正挂载到文档后才会触发 connectedCallback，这里才是读属性、渲染 UI、绑定事件的正确时机。
- 首次渲染逻辑必须放在这里，比如
this.shadowRoot.innerHTML = template - 属性读取应统一在此处完成：
this.getAttribute('size') || 'medium' - 事件监听器注册放这里才有效：
this.addEventListener('click', this._onClick) - 若需响应属性变更，
attributeChangedCallback不会触发初始值，所以首次值仍得在connectedCallback里手动同步 - 注意：该回调只对声明在
static observedAttributes中的属性生效，漏写就完全收不到变化
注册顺序和重复定义是线上最常踩的坑
customElements.define() 必须在任何对应标签被解析前执行，且同一名称只能注册一次。这两个限制在动态加载、多入口、微前端场景下极易出问题。
- HTML 中写了
<loading-button></loading-button>，但脚本在它后面才执行 → 元素变成“未升级元素”，生命周期钩子永不触发 - 解决办法：把
define放在<script defer></script>中，或确保 script 标签在所有自定义标签之前 - 模块化项目中，多个文件各自
define('x-button', ...)→ 报错：The name "x-button" has already been used - 推荐做法：集中注册，比如在应用入口统一 import 所有组件类，再批量
define - 动态插入 HTML（如
el.innerHTML = '<my-card></my-card>'）时，必须先 define 再插入，否则新节点不会自动升级
真正难的不是写一个能跑的自定义元素，而是让它的行为和原生标签一样稳定——比如属性同步、事件冒泡、表单关联、无障碍支持。这些细节不显眼，但一旦缺失，就会在复杂交互或跨框架嵌入时暴露出来。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
