如何使用Lit为带有自定义元素兄弟节点的宿主元素设置样式

嘿，我懂你现在的困扰啦——在用Lit开发Web Components时，想给带有自定义元素兄弟的宿主元素（也就是你的<custom-element>）设置特定样式对吧？别慌，咱们用Lit的CSS语法就能轻松搞定，下面给你一步步讲清楚～

首先得明确：我们要针对当宿主元素有某个自定义元素作为兄弟节点时，给宿主本身应用样式。这里主要用到Lit里的:host伪类结合CSS的兄弟选择器或者:has()伪类，不同场景对应不同写法：

场景1：宿主元素紧跟在目标自定义元素之后 #

假设你的页面结构是这样：

<custom-element1></custom-element1>
<custom-element></custom-element>

你想让<custom-element>在<custom-element1>后面时，拥有特定样式，那就在<custom-element>的CSS里这么写：

custom-element1 + :host {
  background-color: #f8bbd0;
  padding: 8px;
  border-radius: 4px;
}

这里的+是相邻兄弟选择器，专门匹配紧跟在指定元素后面的兄弟节点，结合:host就精准选中了符合条件的宿主元素。

场景2：宿主元素后面紧跟目标自定义元素 #

如果结构反过来，宿主在前面，目标兄弟在紧挨着的后面：

<custom-element></custom-element>
<custom-element1></custom-element1>

这时用:has()伪类就很方便，它能检测宿主元素的后续兄弟节点：

:host:has(+ custom-element1) {
  background-color: #fff9c4;
  border: 1px solid #fbc02d;
}

:host:has(+ custom-element1)的意思就是：当宿主元素的下一个相邻兄弟是<custom-element1>时，应用这些样式。

场景3：宿主和目标自定义元素是任意兄弟（不相邻） #

如果宿主和目标兄弟中间隔了其他元素，比如：

<custom-element></custom-element>
<p>这是中间的内容</p>
<custom-element1></custom-element1>

那把相邻兄弟选择器+换成通用兄弟选择器~就行，它能匹配所有在宿主之后的目标兄弟，不管中间有没有其他元素：

:host:has(~ custom-element1) {
  background-color: #e1f5fe;
  padding: 10px;
}

小提醒：兼容性问题 #

:has()伪类现在已经被大部分现代浏览器支持了（Chrome、Firefox 121+、Safari都没问题），如果你的项目需要兼容比较老旧的浏览器，那可以换个思路：给父元素手动添加一个标识类，比如<div class="has-custom-sibling">，然后用:host-context()来匹配：

:host-context(.has-custom-sibling) {
  /* 你的样式 */
}

不过这种方法需要你手动控制父元素的类，不如:has()来得灵活。

内容来源于stack exchange