Lit/Web Components子组件能否感知父组件的theme属性？

现有代码如下：

<theme-component theme="dark">
  <my-component></my-component>
</theme-component>

请问<my-component>能否感知到它处于带有theme="dark"属性的<theme-component>内部？还是必须手动将theme="dark"传递给<my-component>？

<my-component>的样式定义如下：

static darkStyle = css`
    :host {
      --my-bkg: #535353;
      --my-items: #474747;
      --my-gutter: #4a4a4a;
      --my-border: #474747;
      --my-item-border: #535353; /* 仅深色主题下，该颜色与背景色一致，而非页脚边框色 */
      --my-divider: #636363;
    }
  `;

  static lightStyle = css`
    :host {
      --my-bkg: #b8b8b8;
      --my-items: #c7c7c7;
      --my-gutter: #ababab;
      --my-border: #adadad;
      --my-item-border: #adadad; /* 仅浅色主题下，该颜色与页脚边框色一致 */
      --my-divider: #9e9e9e;
    }
  `;

  static styles = [this.darkStyle, sheet];

我希望能通过某种三元表达式切换this.darkStyle或this.lightStyle，或者编写如下的CSS：

static styles = [css`
theme-component[theme=dark] :root {
  --my-bkg: #535353;
}
`, sheet];

我查阅了SuperElement.styles的文档，但不清楚如何基于父组件属性来使用它。我并非要共享样式，而是想通过父组件属性确定新的变量值。

1. 无需手动传递属性：用CSS选择器直接感知父组件状态 #

你不需要手动传递theme属性，利用CSS的:host-context()选择器就能让<my-component>感知到外部父组件的属性状态，适配Shadow DOM场景：

static styles = [css`
  /* 父组件为dark主题时，设置当前组件的变量 */
  :host-context(theme-component[theme="dark"]) {
    --my-bkg: #535353;
    --my-items: #474747;
    --my-gutter: #4a4a4a;
    --my-border: #474747;
    --my-item-border: #535353;
    --my-divider: #636363;
  }
  /* 默认浅色主题样式，也可单独写light主题的:host-context规则 */
  :host {
    --my-bkg: #b8b8b8;
    --my-items: #c7c7c7;
    --my-gutter: #ababab;
    --my-border: #adadad;
    --my-item-border: #adadad;
    --my-divider: #9e9e9e;
  }
`, sheet];

:host-context()可以让Shadow DOM内的组件识别外部祖先元素的状态，完全匹配你的需求。

2. 用JS动态切换样式数组 #

如果需要通过三元表达式动态选择样式，可以在组件实例中监听父组件属性变化，更新样式表：

constructor() {
  super();
  this.updateThemeStyles();
  // 监听父组件theme属性变化
  const observer = new MutationObserver(() => this.updateThemeStyles());
  observer.observe(this.parentElement, { attributes: true, attributeFilter: ['theme'] });
}

updateThemeStyles() {
  const isDark = this.parentElement?.getAttribute('theme') === 'dark';
  // 替换当前组件的样式表
  this.shadowRoot.adoptedStyleSheets = [
    isDark ? this.constructor.darkStyle : this.constructor.lightStyle,
    sheet
  ];
}

这种方式适合需要复杂JS逻辑控制的场景，但需要额外处理监听逻辑。

注意事项 #

• 你之前写的theme-component[theme=dark] :root选择器不生效，因为:root指向全局文档根节点，而非组件的Shadow DOM根，应该用:host或:host-context()定位组件自身。
• 如果<theme-component>也使用了Shadow DOM，:host-context()会失效，此时可以让<theme-component>把主题变量暴露到上下文：

// theme-component的样式
static styles = css`
  :host([theme="dark"]) {
    --my-bkg: #535353;
    --my-items: #474747;
    /* 其他主题变量 */
  }
  :host([theme="light"]) {
    --my-bkg: #b8b8b8;
    --my-items: #c7c7c7;
    /* 其他主题变量 */
  }
`;

然后<my-component>直接继承这些变量即可：

static styles = [css`
  :host {
    --my-bkg: var(--my-bkg);
    --my-items: var(--my-items);
    /* 其他变量同理 */
  }
`, sheet];

内容的提问来源于Stack Exchange，提问作者Dave Stein