customElements.define()必须在HTML解析前执行，否则标签被当作未知元素不升级；标签名须含短横线，类须继承HTMLElement且显式命名，重复注册或未注册即使用均导致失败。

customElements.define() 必须在使用自定义标签前执行，否则标签只是普通未知元素，不触发生命周期、无 Shadow DOM、无法响应属性变更。

为什么 <my-button></my-button> 写了却没渲染

浏览器不会自动把任意带连字符的 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 或克隆 <template>）

attachShadow({ mode: 'closed' }) 有什么坑

调试时基本等于自断手脚。

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

• mode: 'closed' 下，el.shadowRoot 恒为 null，DevTools 里也看不到影子树结构
• 第三方库（如测试工具、a11y 扫描器）无法访问内部节点，导致测试失败或无障碍支持缺失
• 除非有强安全隔离需求（如嵌入不受信内容），否则默认用 'open'
• Shadow DOM 的样式封装靠的是作用域机制，不是靠 closed 模式实现的

发布前必须检查的三件事

Web Components 不是写完 class 就能扔进生产环境的。

立即学习“前端免费学习笔记（深入）”；

• 确保所有依赖的 polyfill 已加载（如 @webcomponents/webcomponentsjs），尤其要覆盖 IE11 和旧版 Safari
• 自定义标签名必须含连字符（-），如 my-button 合法，mybutton 或 MyButton 会直接报错
• 避免在 render() 或生命周期中直接操作全局 DOM（如 document.body.appendChild），这会破坏封装性，也容易引发内存泄漏

Shadow DOM 的样式隔离和 slot 分发是 Web Components 的核心价值，但它们不会自动生效——必须靠正确注册、合理使用生命周期、以及避开那些看似合理实则阻断封装的配置。