Web Components完整指南：从创建到发布

这篇文章深入剖析了Web Components从开发到发布的完整实践路径，直击开发者在创建自定义元素时最常踩的坑：注册时机错误导致标签不升级、属性监听失效、shadowRoot为空、生命周期回调未触发、closed模式引发调试与可访问性灾难，以及发布前易被忽视的兼容性、命名规范和封装性陷阱；它不仅讲清“怎么写”，更聚焦“为什么写了却没渲染”“为什么instanceof失败”“为什么样式没隔离”等真实痛点，为构建健壮、可维护、真正符合标准的Web组件提供了一套务实、精准、避坑指南。

为什么 写了却没渲染

浏览器不会自动把任意带连字符的 HTML 标签识别为组件。它只认注册过的名称。

• document.querySelector('my-button') 能取到节点，但 node instanceof MyButton 是 false
• this.shadowRoot 为 null，因为 attachShadow() 根本没被调用
• connectedCallback 完全不执行——连注册都没做，哪来的回调
• 常见错误提示：Failed to execute 'define' on 'CustomElementRegistry': the name "my-button" has already been used，本质是重复注册；更普遍的情况是压根没注册就写了标签

constructor 里能读 this.getAttribute() 吗

不能。属性尚未解析，此时读取一律返回 null 或空字符串。

• 必须用 attributeChangedCallback 响应变更，且需配合 static get observedAttributes() 显式声明监听列表
• observedAttributes 返回空数组或未定义 → attributeChangedCallback 永远不会触发
• 想初始化时读属性？改用 connectedCallback：它在元素挂载后立即执行，此时所有属性已就位
• constructor 只做同步初始化：调 super()、创建 shadowRoot、设置初始结构（如 innerHTML 或克隆