如何在Shadow Root外部为自定义标签内的.label元素设置样式？

因为.label位于<tag>组件的Shadow DOM内部，常规外部CSS选择器无法穿透Shadow DOM进行样式设置，你可以通过以下两种常用方法实现：

• 利用CSS自定义属性（变量）
  首先需要组件内部的.label样式引用自定义变量，比如组件的Shadow DOM样式中写：

  .label {
    color: var(--label-text-color, #333);
    font-size: var(--label-font-size, 14px);
    /* 其他样式可设置默认值 */
  }
  

  之后在组件外部的全局CSS里，给<tag>元素设置这些变量即可生效：

  tag {
    --label-text-color: #ff4400;
    --label-font-size: 16px;
  }
  

• 使用Shadow DOM的::part伪元素
  需要组件在Shadow DOM内的.label元素上添加part属性，修改后的Shadow DOM结构如下：

  <slot name="avatar"></slot>
  <span class="label" part="label"><spot></spot></span>
  

  然后外部就可以通过::part选择器直接定位该元素设置样式：

  tag::part(label) {
    font-weight: 700;
    padding: 4px 8px;
    background: #f5f5f5;
  }
  

注意：这两种方法都依赖组件本身提供对应的样式入口——要么内部使用了自定义属性，要么给目标元素添加了part属性。如果组件没有做这些处理，外部无法直接修改Shadow DOM内元素的样式（除非组件关闭了Shadow DOM的封装性，但这并不推荐）。

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