Shadow DOM 是浏览器原生的 DOM 分离机制，通过 attachShadow() 创建独立子树，样式隔离由浏览器在解析阶段强制切断跨 boundary 匹配，外部 CSS 不参与 shadowRoot 的 CSSOM 构建，!important 无效；:host 和 ::slotted() 是 W3C 唯一允许跨边界的伪类，仅支持有限样式穿透。
Shadow DOM 不是“写出来”的 HTML 特性，而是浏览器原生的 DOM 分离机制；它靠 attachShadow() 创建独立子树，样式隔离不是靠优先级压制，而是浏览器在解析阶段就跳过跨 boundary 的匹配 —— 外部 CSS 根本不进 shadowRoot 的样式计算流程。
为什么 button { color: red !important } 对 Shadow 内按钮无效
这不是选择器权重不够，是作用域被浏览器强制切断。外部 <style> 或 <link> 样式表压根不会参与 shadowRoot 的 CSSOM 构建。哪怕宿主元素是 <my-button>，里面那个 <button> 也完全看不到全局规则。
-
!important只在同一个样式作用域内生效，跨 shadow boundary 就像跨进程通信，没通道 - 用户代理样式（如
a默认蓝色）会覆盖从宿主继承的color，必须显式写color: inherit才能穿透继承链 - 已废弃的
/deep/、::ng-deep、>>>在 Chrome 120+ 和 Firefox 115+ 中已被移除，继续用等于写死兼容性 bug
:host 和 ::slotted() 是唯一合规的跨边界样式钩子
W3C 规范只允许这两个伪类合法地“穿墙”，其余全是单向封闭。它们不是“增强版选择器”，而是边界上的协议接口。
-
:host只匹配宿主元素自身（即<my-card>这个标签），不能匹配其子元素：:host(.dark)有效，:host div.dark无效 -
::slotted(*)只作用于被<slot>投影进来的 light DOM 节点，且仅支持可继承属性：color、font、background-color可设；display、margin、width禁止设 - 别用
::slotted(*)全局接管布局 —— slot 内容的结构和尺寸责任本该由使用者承担，强行接管反而破坏封装
怎么安全注入第三方 CSS（如 Foundation、Font Awesome）
不能把 <link rel="stylesheet"> 直接塞进 shadowRoot.innerHTML，那样会加载到全局作用域，失去隔离意义。也不能用 innerHTML = '<style>...</style>'，因为内联 <style> 会被当普通 HTML 解析，无法参与 CSSOM，后续动态更新失效。
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
立即学习“前端免费学习笔记（深入）”；
- 推荐方式：用
CSSStyleSheet实例 +adoptedStyleSheets（Chrome 73+ / Safari 16.4+ 支持） - 对远程
<link>，需主应用代理请求，返回带scope属性的 CSS 文本，再构造CSSStyleSheet - 注意
adoptedStyleSheets不处理@import、相对路径（如url(./img.png)）、CSS 变量继承断裂等问题
attachShadow() 常见失败原因与 mode 选择
调用 attachShadow() 报 "This element does not support shadow roots"，基本就是宿主元素选错了。
- 支持挂载的元素：自定义元素（
<my-button>）、<div>、<span>；不支持的有<img>、<p>、<input>、<ul>等原生替换或语义化容器 -
mode: 'open'是日常开发首选，允许 JS 通过element.shadowRoot访问，方便调试；设为'closed'后返回null，调试基本靠猜 - 重复调用
attachShadow()到同一元素会触发InvalidStateError
真正难的不是创建 shadowRoot，而是处理那些“看起来应该生效但其实不会”的样式场景 —— 比如用户代理样式覆盖继承值、adoptedStyleSheets 对相对路径的静默失败、::slotted() 对非投影内容的完全无感。这些点不写测试很难暴露，上线后才踩坑成本最高。
