不能直接 innerHTML = ...，因为会将 template 当作文本解析，导致 slot 不生效、样式不激活、事件丢失；必须用 template.content 克隆后插入，且需监听 slotchange 事件。
为什么不能直接 innerHTML = `...`
常见错误是把整个 <template> 标签字符串塞进 shadowRoot.innerHTML，比如：shadowRoot.innerHTML = '<template><div>...</div></template>'。这会导致 <template> 被当作文本节点解析，里面的 <slot> 不生效、样式不激活、事件监听器丢失——因为浏览器根本没把它当作模板处理。
真正起作用的是 template.content，它是一个 DocumentFragment，包含已解析的 DOM 节点树和语义（比如 slot 绑定、样式作用域、脚本可执行性）。必须显式克隆后插入。
- ✅ 正确顺序：先
attachShadow({ mode: 'open' })，再document.importNode(template.content, true)或cloneNode(true) - ❌ 错误写法：
shadowRoot.innerHTML = template.innerHTML或shadowRoot.appendChild(template.content)（后者会报错或静默失败） - ⚠️ 注意：
template.content只能被克隆一次；重复调用cloneNode(true)后再 append 会失败，需每次新建克隆
如何让 <slot> 在 Shadow DOM 中正常工作
<slot> 是内容分发的唯一标准机制，但它只在 Shadow DOM 上下文中有效。放在 light DOM 或普通 div 里毫无意义。
- ✅ 模板中必须显式声明
<slot name="header"></slot>，宿主元素内对应写<my-card><h2 slot="header">标题</h2></my-card> - ✅ 默认插槽用
<slot></slot>，未匹配命名 slot 的内容会自动投射到这里 - ⚠️ 投射内容不自动继承布局属性（如
display、margin），这些由使用者负责；::slotted(p)只能设color、font-family等可继承属性 - ⚠️ 想监听内容变化？得监听
slotchange事件，再调用slot.assignedNodes({ flatten: true })获取真实节点
样式注入必须绕过 innerHTML 字符串拼接
把 <style> 和结构混在 shadowRoot.innerHTML = '...' 里，会导致样式标签被当成普通 HTML 解析，不进入 CSSOM，后续 JS 修改规则（比如 sheet.cssRules[0].style.color = 'red'）完全无效，甚至触发 FOUC。
立即学习“前端免费学习笔记（深入）”；
- ✅ 推荐做法：用
document.createElement('style')+textContent+appendChild()分步注入 - ✅ 如果要用
<template>，确保<style>写在template.content里，克隆后自动生效 - ⚠️
<link rel="stylesheet">在<template>里无效；外部 CSS 文件对 shadow 内部零影响 - ⚠️
mode: 'closed'会让element.shadowRoot返回null，DevTools 无法 inspect，调试时基本抓瞎，生产环境慎用
:host 和 ::slotted() 是唯一合法的“穿透通道”
Shadow DOM 的隔离是浏览器在样式计算阶段就跳过跨 boundary 匹配，不是优先级问题。外部 button { color: red !important } 对 shadow 内按钮完全无效——它根本不在样式计算队列里。
- ✅
:host控制宿主元素自身样式：:host([disabled]) { opacity: 0.5; }；:host-context(.theme-dark)响应祖先类名 - ✅
::slotted(p)仅影响传入<slot>的顶层<p>元素，且只支持可继承属性 - ❌ 禁止写
::slotted(*)或:host ::slotted(*)—— 行为不一致，部分浏览器已移除支持，且违背封装原则 - ⚠️ 如果需要基础字体/颜色透入，显式写
:host { font-family: inherit; color: inherit; }，否则可能丢失继承链
template.content 的克隆时机和 slotchange 的监听必要性——不监听就感知不到动态插入的内容，不克隆就得不到真正的节点树。这两步漏掉一个，组件就只是“看起来像”，而不是“真正工作”。 
