Css 如何设置web组件中最后一个开槽元素的样式

我有一个web组件，它有一个模板，看起来像这样

<template>
  <div class="jrg-app-header">
    <slot name="jrg-app-header-1"></slot>
    <slot name="jrg-app-header-2"></slot>
    <slot name="jrg-app-header-3"></slot>
  </div>
</template>

---

但它没有起作用。如何设置最后一个开槽对象的样式？

有关：：slotted的详细答案，请参阅：

---

从文档中：

：：开槽（）

伪选择器位于括号内：：：slotted（*:last child）

注意：

：slotted（…）

使用一个简单的选择器（）

customElements.define（'my-table'，类扩展HtmleElement{
构造函数（）{
让template=document.cloneNode（document.querySelector（'#t1'）。content，true）；
超级（）
.attachShadow（{mode:'open'}）
.附加（模板）；
}
})

：主持人{
显示器：flex；
填充：1em；
}
：：开槽（*：第一个孩子）{
背景：绿色；
}
：：开槽（*：最后一个孩子）{
背景：黄色；
弹性：1；
}
：：开槽（*：类型的第一个）{
边框：2倍纯红；
}
：：开槽（*：类型的最后一个）{
边框：2个红色虚线；
}
阿尔法布雷哈雷酒店
三角洲

我以div结束了包装，但这不是最好的解决方案。谢谢，但附带说明：之前和之后呢？我试过…：：slotted（：before）和：：slotted（）：before

：：slotted（）

需要在圆括号之间使用一个简单的CSS选择器（）

：before

本身不是有效的选择器，因此

：：slotted（*）：before

也不起作用。W3C的争论就在这里：这不容易解释；你可以通过阅读所有的“时隙”答案来学习：（使用&as_qdr=y1过滤去年的“时隙”谷歌搜索结果）

::slotted(*):last-child{
  flex:1;
}