HTML中Shadow DOM的工作原理与样式隔离机制教程-html教程-PHP中文网

shadow dom 是浏览器原生的 dom 分离机制，通过 attachshadow() 创建独立子树，样式隔离由浏览器在解析阶段强制切断跨 boundary 匹配，外部 css 不参与 shadowroot 的 cssom 构建，!important 无效；:host 和 ::slotted() 是 w3c 唯一允许跨边界的伪类，仅支持有限样式穿透。

html中shadow dom的工作原理与样式隔离机制教程

Shadow DOM 不是“写出来”的 HTML 特性，而是浏览器原生的 DOM 分离机制；它靠 attachShadow() 创建独立子树，样式隔离不是靠优先级压制，而是浏览器在解析阶段就跳过跨 boundary 的匹配 —— 外部 CSS 根本不进 shadowRoot 的样式计算流程。

为什么 `button { color: red !important }` 对 Shadow 内按钮无效

这不是选择器权重不够，是作用域被浏览器强制切断。外部 <style></style> 或 <link> 样式表压根不会参与 shadowRoot 的 CSSOM 构建。哪怕宿主元素是 <my-button></my-button>，里面那个 <button></button> 也完全看不到全局规则。

!important 只在同一个样式作用域内生效，跨 shadow boundary 就像跨进程通信，没通道
用户代理样式（如 a 默认蓝色）会覆盖从宿主继承的 color，必须显式写 color: inherit 才能穿透继承链
已废弃的 /deep/、::ng-deep、>>> 在 Chrome 120+ 和 Firefox 115+ 中已被移除，继续用等于写死兼容性 bug

`:host` 和 `::slotted()` 是唯一合规的跨边界样式钩子

W3C 规范只允许这两个伪类合法地“穿墙”，其余全是单向封闭。它们不是“增强版选择器”，而是边界上的协议接口。

:host 只匹配宿主元素自身（即 <my-card></my-card> 这个标签），不能匹配其子元素：:host(.dark) 有效，:host div.dark 无效
::slotted(*) 只作用于被 <slot></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></style> 会被当普通 HTML 解析，无法参与 CSSOM，后续动态更新失效。

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

推荐方式：用 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></my-button>）、<div>、<code><span></span>；不支持的有 <img>、<p></p>、<input>、<ul></ul> 等原生替换或语义化容器
mode: 'open' 是日常开发首选，允许 JS 通过 element.shadowRoot 访问，方便调试；设为 'closed' 后返回 null，调试基本靠猜
重复调用 attachShadow() 到同一元素会触发 InvalidStateError