如何覆盖Shadow Root内span元素的CSS样式？

• 提升选择器特异性（Shadow Root内部样式）
  要是你的自定义样式写在Shadow Root内部的样式表里，就通过更精确的选择器来抢优先级。比如给目标span加个自定义类，或者叠加父元素的选择器：

  .class-name-a .class-name-b > span.custom-span {
    border-left: none;
    font-size: 14px;
    /* 其他要改的属性 */
  }
  

  也可以用父元素的ID来强化选择器：

  #parent-container .class-name-a .class-name-b > span {
    font-family: Arial, sans-serif;
  }
  

• 样式穿透（外部样式表控制）
  如果Shadow Root允许外部样式穿透，用:host()伪类定位宿主后再选内部元素：

  :host(.class-name-a .class-name-b) > span {
    margin-left: 8px;
    padding-left: 8px;
  }
  

  部分框架支持::v-deep或:deep()语法穿透，写法如下：

  :deep(.class-name-a .class-name-b > span) {
    order: 2;
  }
  

• 直接修改Shadow Root内部样式
  要是能拿到Shadow Root内部的代码，直接在它的<style>标签里加新规则覆盖就行，后面的规则会覆盖前面的：

  .class-name-a .class-name-b > span {
    font-size: 15px;
    /* 实在没办法再用!important，尽量别用 */
    /* font-size: 15px !important; */
  }
  

• 覆盖CSS变量
  原有样式用了CSS变量，直接修改变量值就能批量改样式。如果是全局变量，在全局样式里重定义：

  :root {
    --css-token-right-statement-border-left: 0;
    --css-token-right-statement-spacing: 6px;
  }
  

  要是变量是Shadow Root内部定义的，就在它内部的样式表里重新赋值。

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