如何根据直接父元素为:host选择器设置样式？

你的问题出在:host-context会匹配所有包含对应标签的祖先元素，而非仅直接父元素，因此嵌套场景下多个样式规则会同时生效。要严格针对直接父元素设置样式，可以使用:host结合:is()选择器与子组合器>来实现精准匹配。

修正后的CSS代码 #

/* 默认样式：直接父不是ui-section或ui-card时 */
:host {
  background-color: green;
}

/* 直接父元素为ui-card时 */
:host(:is(ui-card > *)) {
  background-color: blue;
}

/* 直接父元素为ui-section时 */
:host(:is(ui-section > *)) {
  background-color: yellow;
}

原理说明 #

• :is(ui-card > *) 表示当前<ui-title>宿主元素是ui-card的直接子元素，只有满足这个条件时才会应用蓝色背景。
• 嵌套场景下（比如ui-section包裹ui-card，ui-card再包裹ui-title），<ui-title>的直接父是ui-card，只会触发蓝色背景规则，不会匹配ui-section的规则——因为它并非ui-section的直接子元素。

兼容性说明 #

:is()选择器支持Chrome 88+、Firefox 78+、Safari 14+等现代浏览器，若你的项目需要兼容更旧的浏览器，可以考虑在父组件中添加专属类（如parent-ui-card），再通过:host-context(.parent-ui-card)匹配，但这种方式需要额外修改父组件代码，不如上述方案简洁。

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