Custom Elements+Shadow DOM：如何为具名插槽最后子元素设置样式

当你尝试给具名插槽的最后一个子元素设置样式时，:last-child 选择器会匹配Light DOM中所有插槽元素的最后一个，而非目标具名插槽范围内的最后一个子元素，这就是导致样式不符合预期的核心原因。

正确的选择器写法 #

在自定义元素的Shadow DOM样式中，需要结合 ::slotted() 伪类来限定目标具名插槽的元素，再搭配 :last-child 选中该插槽内的最后一个子元素：

/* 针对名为content的具名插槽 */
::slotted([slot="content"]:last-child) {
  margin-bottom: 0;
  color: #f00;
  /* 其他自定义样式 */
}

如果你的具名插槽元素在Light DOM中是连续的兄弟节点，也可以给插槽套一个容器，简化选择器：

Shadow DOM结构：

<div class="content-slot-wrapper">
  <slot name="content"></slot>
</div>

对应的样式：

.content-slot-wrapper ::slotted(*:last-child) {
  /* 最后一个子元素的样式 */
}

为什么原来的写法无效？ #

:last-child 选择器的作用范围是元素在Light DOM中的直接父元素，而非Shadow DOM中的插槽。比如Light DOM里同时存在多个不同插槽的元素时，:last-child 会选中整个父容器下的最后一个子元素，完全忽略插槽的归属，自然无法精准定位到目标具名插槽的最后一个子元素。

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