css - Web 组件 : Adjacent sibling selectors in children

Question

如何在 Webcomponents 中定位以下内容？ (ShadomDom V1 & 自定义元素 V1)

pagination-item + pagination-item {
   margin-right: 10px;
}

在下面...

<pagination>
    <pagination-item></pagination-item>
    <pagination-item></pagination-item>
</pagination>

如果我把它放在分页元素样式中，它不起作用。如果我将 :host + :host 放在分页项中，它就不起作用。

如何在不使用黑客的情况下实现这一目标？如果你做不到，这似乎是可组合性中的一个大问题......

Answer 1

它应该默认工作(你不是说 margin-left 吗？)。

如果没有，您可以使用 :not(:first-child)在容器中(如果它也是一个 Shadow DOM):

::slotted(pagination-item:not(:first-child)) {
    margin-right: 10px;
}

或者您可以在 <position-item> 中使用它元素:

:host(:not(:first-child)) {
    margin-right: 10px;
}

---

注意:::slotted 中的选择器伪元素仅限于 performance concerns 的化合物选择器:

While ::content can take any arbitrary selector, ::slotted can only take a compound selector (in the parenthesis). The reason of this restriction is to make a selector style-engine friendly, in terms of performance. In v0, it is difficult to avoid a performance penalty caused by an arbitrary selector which crosses shadow boundaries.