Shadow DOM中直接在template内写无效，因克隆后被当普通文本节点处理、未进入CSSOM；必须显式提取节点并appendChild到shadowRoot，或用CSSStyleSheet.replaceSync注入。

直接在 template 中写

HTML 标签本身不执行任何渲染或样式解析，它只是存储结构的“模具”。把 写在里面，再克隆插入到 shadowRoot，浏览器会把它当普通文本节点处理——cssRules 为空，样式完全不生效。

常见错误现象：
• shadowRoot.innerHTML = template.content.innerHTML 后，样式没作用
• 用 shadowRoot.appendChild(template.content.cloneNode(true))， 节点存在但未进入 CSSOM

• 必须显式提取 节点，再调用 shadowRoot.appendChild(styleNode)
• 或者用 new CSSStyleSheet() 创建实例，再通过 replaceSync() 注入内容
• 避免在 template 中混写结构与样式；建议分离：模板只管 HTML 结构，样式走 JS 动态注入

adoptedStyleSheets 只对 ShadowRoot 有效，document 上赋值静默失败

document.adoptedStyleSheets = [sheet] 不会报错，但也不起作用——这个属性只在 ShadowRoot 实例上被浏览器识别。误用会导致样式完全丢失，且难以排查。

正确路径只有一步：
先 el.attachShadow({ mode: "open" })，拿到 shadowRoot，再对其赋值

• 不能跳过 attachShadow() 直接操作 adoptedStyleSheets
• mode: "closed" 会让 element.shadowRoot 返回 null，调试时看不到样式树，推荐始终用 "open"
• 多个样式表按数组顺序叠加，前面的规则可被后面的同级选择器覆盖（层叠逻辑照常）

移除某条样式规则必须先查索引再 deleteRule()

CSSStyleSheet 没有 removeRule(".my-class") 这种方法。想删掉某条规则，得先遍历 sheet.cssRules 找到匹配的选择器索引，再调用 sheet.deleteRule(index)。

HTML Text Extract

从HTML页面（URL、文件或标准输入）中提取主体内容文本，去除导航、页脚、广告和模板文本。可直接传递给readability_check或其他文本工具。

下载

注意：
• sheet.cssRules 是实时集合，长度随增删动态变化
• deleteRule() 是同步操作，但不会触发重排，需手动触发（如改 class 或强制 layout）

• 增量添加用 insertRule("div:hover { opacity: 0.7; }", sheet.cssRules.length)
• 全量替换优先用 sheet.replaceSync(cssText)，比异步 replace() 更可控
• 不要尝试 sheet.cssText = ""，该属性只读，赋值静默忽略

第三方组件注入时，必须用 Shadow DOM 隔离，scoped 属性已失效

在 Chrome 120+ 和 Firefox 115+ 中已被移除，它从未真正提供样式隔离。BEM 类名、CSS Modules 等方案都依赖命名约定，无法阻止宿主页面的 button { background: red !important } 穿透覆盖。

Shadow DOM 是唯一由浏览器强制执行的隔离机制——它在样式计算阶段就跳过跨 boundary 匹配，不是优先级问题，是根本“看不见”。

• 所有样式必须注入到 shadowRoot 内部，不能靠 外链（除非配合 adoptedStyleSheets）
• 基础属性（font-family、color）默认继承，但 margin、display 等不继承，需显式写 :host { margin: 0; }
• 外部框架（如 Bootstrap）的全局类名（.btn、.container）只在 shadow 内生效，不影响宿主页面

关键点在于：样式注入不是“往 HTML 里塞标签”，而是建立边界 + 显式挂载。漏掉 attachShadow() 或误用 document.adoptedStyleSheets 是最常踩的两个坑。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！