Shadow DOM中使用:root自定义属性的技术实现问询

你的理解有部分正确性，但核心原因需要再明确一下：当你把project.css引入到ShadowRoot内部时，其中的:root选择器会匹配ShadowRoot的根节点，而不是外部文档的<html>元素——这才是自定义属性丢失的关键。如果project.css是在外部全局加载的，它的:root自定义属性本来是可以穿透Shadow DOM被内部访问的，因为CSS自定义属性默认是可以跨Shadow边界继承的。

下面分场景给你可行的解决方案：

方案一：利用自定义属性的穿透性（最简便推荐） #

如果project.css可以作为全局样式在外部文档中加载（这应该是常规情况），那你完全不需要把它导入到ShadowRoot里：

• 全局加载的project.css中:root定义的自定义属性会自动穿透到ShadowRoot内部，你可以在组件的Shadow样式中直接用var(--xxx)调用这些属性。
• 为了避免project.css里的其他全局样式（比如针对body、通用标签的样式）渗透到组件库，你可以在ShadowRoot的根元素（:host）上重置样式，阻断非自定义属性的继承：

  /* ShadowRoot内部的组件样式 */
  :host {
    all: initial; /* 重置所有默认样式，避免全局样式渗透 */
    /* 自定义属性是基于继承的，all: initial不会影响它们的传递，所以可以直接使用 */
  }
  
  /* 组件内部元素直接使用全局自定义属性 */
  .component-title {
    color: var(--primary-text-color);
    background: var(--component-bg);
  }
  

这样既保留了全局自定义属性的可用性，又隔离了project.css的其他样式，同时component-library.css的样式只会在Shadow内部生效，不会向外渗透。

方案二：必须在ShadowRoot内引入project.css时的变量转发 #

如果因为某些限制，你必须把project.css导入到ShadowRoot内部，那可以通过“变量转发”的方式解决:root不匹配的问题：

• 在导入project.css之前，先从外部文档的:root把需要的自定义属性转发到ShadowRoot内部的:host或根节点上，这样project.css里的:root选择器引用的变量就能拿到值了：

  /* ShadowRoot内部的前置样式 */
  :host {
    /* 把外部全局的自定义属性转发到Shadow内部 */
    --primary-text-color: var(--primary-text-color);
    --component-bg: var(--component-bg);
    /* 所有project.css中用到的自定义属性都需要这样转发 */
  }
  
  /* 然后导入project.css */
  @import './project.css';
  

• 注意：如果project.css里的:root除了自定义属性还有其他样式（比如设置font-family），这些样式会应用到Shadow根节点，你可能需要在:host上额外重置这些样式，避免影响组件布局。

补充说明 #

你最初觉得需要把:root改成:host的思路是对的方向，但因为你不能修改project.css，所以通过变量转发或者利用自定义属性的穿透性是更可行的替代方案。

内容的提问来源于stack exchange，提问作者mgrsskls