无法通过CSS选择器选中<slot>，如何为“Launch”文本设置红色样式？

要把slot里的“Launch”文本设为红色，你之前的选择器没生效，主要是::slotted()的使用规则和组件结构的问题，试试下面的方法：

• 先处理文本容器：::slotted()无法直接选中未被HTML标签包裹的纯文本，所以先给“Launch”加个容器元素，比如：

  <sl-tab>
    <span>Launch</span>
  </sl-tab>
  

• 使用正确的::slotted选择器：不需要嵌套::part(base)，直接针对分发到slot里的元素设置样式：

  sl-tab::slotted(span) {
    color: red;
  }
  

• 备选方案：利用组件CSS变量：很多Web Component会暴露自定义CSS变量控制样式，比如sl-tab可能有文本颜色变量，直接设置更简单：

  sl-tab {
    --sl-tab-text-color: red;
  }
  

如果还是不行，检查sl-tab的shadow DOM结构——如果slot嵌套在::part(base)的子元素里，::part(base)::slotted(*)这种写法无效，因为::slotted只能选择被分发到slot中的外部元素，不能沿着组件内部DOM层级嵌套使用。

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