shadow dom样式无法穿透，但可通过:host读取宿主css变量、::slotted()控制插槽内容可继承样式、::part()暴露内部节点供外部定制、adoptedstylesheets注入预处理样式实现可控对接。

Shadow DOM 本身不支持“穿透”样式限制——这不是一个可开关的通道，而是浏览器强制执行的封装边界。所谓“应用全局样式”，实际是指在遵守 Shadow DOM 封装规则的前提下，有控制地引入或响应外部样式影响，而非绕过隔离机制。

用 :host 读取并响应宿主上的 CSS 变量

这是最轻量、最标准的“对接全局”的方式。CSS 自定义属性天然继承跨 boundary，但前提是变量定义在宿主元素自身（或其直系祖先）上。

• 在自定义元素上设置：<my-card style="--card-bg: #f0f9ff; --text-primary: #1e293b;"></my-card>
• 在 shadow 内部写：:host { background-color: var(--card-bg, #fff); color: var(--text-primary); }
• 注意：:host 必须存在，否则 var() 查不到宿主值；::host-context() 已废弃，不要用

用 ::slotted() 控制投射内容的可继承样式

::slotted() 是唯一能影响 slot 分发内容的伪类，仅限 color、font、line-height 等可继承属性，不能设 margin、display 或 border。

Article To Html

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

下载

• 适用场景：外部传入的文本、图标、按钮等轻量内容需要统一字体或颜色
• 示例：::slotted(*) { font-family: inherit; color: var(--text-primary); }
• 错误做法：试图用 ::slotted(.btn) { padding: 12px; } —— 布局类属性会被浏览器忽略

用 ::part() 暴露内部子元素供外部定制

通过 part="name" 显式标记内部节点，再用 my-component::part(name) 在外部样式中精准控制，比 ::slotted() 更灵活，且支持更多属性。

• 组件内写：<button part="action-button">提交</button>
• 外部写：my-component::part(action-button) { background: var(--primary); font-size: 1rem; }
• 注意：::part() 不支持嵌套选择器，::part(button) span 无效；所有 part 名需在文档中明确定义

用 adoptedStyleSheets 注入预处理的全局样式

适合复用基础重置、工具类或主题样式，但需主动提取和注入，不是自动穿透。

• 创建可复用样式表：const baseSheet = new CSSStyleSheet(); baseSheet.replaceSync('.text-sm { font-size: 0.875rem; }');
• 注入到 shadow：shadowRoot.adoptedStyleSheets = [baseSheet];
• 优势：样式复用、动态切换主题、避免重复解析；注意兼容性（Chrome 73+ / Safari 16.4+）