为何ShadowRoot内设置color:inherit无法继承根元素颜色？

问题核心在于Shadow DOM的样式作用域和优先级规则，具体拆解如下：

1. 全局样式* {color: blue}会直接作用到宿主元素shadowRootContainer上——它属于主DOM的一部分，*选择器匹配所有主DOM元素，自然包括这个容器。
2. Shadow内部的:host {color: red}是用来定义宿主元素的样式，但它的优先级低于主DOM的全局样式。按照CSS作用域规则，主DOM作用域的样式优先级高于Shadow内部的:host样式，所以宿主元素的实际颜色还是蓝色。
3. Shadow根内部的<span style="color:inherit">继承的是它的直接父级（Shadow根）的颜色，而Shadow根默认继承宿主元素的颜色（蓝色），因此最终span显示蓝色。

解决方法 #

• 提升:host样式的优先级，比如添加!important强制覆盖全局样式：

  :host{
    color: red !important;
  }
  

• 直接在主DOM中给shadowRootContainer设置专属样式，规避全局*选择器的影响：

  #shadowRootContainer {
    color: red;
  }
  

• 在Shadow内部给span套一层容器，通过容器设置颜色让span继承：

  <style>
    .inner-wrap {color: red;}
  </style>
  <div class="inner-wrap">
    <span style="color:inherit;">Hello World</span>
  </div>
  

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