如何穿透两层Shadow DOM修改select-container的背景色？

首先得明确：Web组件的Shadow DOM默认是样式隔离的，你没法直接从父组件<x-typography>的样式里穿透到<x-select>的Shadow DOM内部选中.select-container——这也是你之前试的那些选择器无效的原因，:host只能针对当前组件（也就是<x-typography>自身），没法链式指向子组件的Shadow DOM。

下面给你几个可行的解决方案，按推荐程度排序：

1. 利用CSS自定义属性（变量）实现样式穿透 #

如果<x-select>的内部样式已经用了CSS变量来控制.select-container的背景色（这是组件开发者最推荐的暴露样式的方式），那你只需要在<x-typography>的样式里定义这个变量即可：

/* 在x-typography的样式中 */
:host {
  --x-select-container-bg: #your-desired-color; /* 比如#f0f0f0 */
}

只要<x-select>的内部样式是这么写的（你不需要修改这个，只要它原本就用了变量）：

.select-container {
  background-color: var(--x-select-container-bg, #default-color);
}

你的自定义颜色就会自动覆盖默认值。

2. 用::part()选择器（如果x-select暴露了可样式化部件） #

如果<x-select>的开发者把.select-container标记成了可外部样式化的部件（也就是给元素加了part属性）：

<!-- x-select的Shadow DOM内部结构 -->
<div part="select-container" class="select-container"></div>

那你可以在<x-typography>的样式里直接通过::part()选中它：

/* 在x-typography的样式中 */
x-select::part(select-container) {
  background-color: #your-desired-color !important;
}

::part()是Web组件标准中专门用来允许外部样式修改内部特定元素的方法，前提是组件开发者提前暴露了这个part。

3. 通过JavaScript注入样式（仅当Shadow DOM为开放模式时可用） #

如果上面两种方法都不行，且<x-select>的Shadow DOM是开放模式（也就是创建时用了mode: 'open'），你可以在<x-typography>的JavaScript代码里手动往<x-select>的Shadow DOM里插入样式：

// 在x-typography的connectedCallback生命周期中
connectedCallback() {
  super.connectedCallback?.();
  const xSelectEl = this.querySelector('x-select');
  // 确认能访问到x-select的Shadow DOM
  if (xSelectEl?.shadowRoot) {
    const style = document.createElement('style');
    style.textContent = `
      .select-container {
        background-color: #your-desired-color !important;
      }
    `;
    xSelectEl.shadowRoot.appendChild(style);
  }
}

注意：如果<x-select>的Shadow DOM是封闭模式（mode: 'closed'），shadowRoot属性会返回null，这种方法就失效了。

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