Webcomponents：兒童中的相鄰兄弟選擇器

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

它應該默認工作（你是不是意味着保證金 - 左？）。

如果沒有，你可以在容器中使用:not(:first-child)（如果它也是一個影子DOM）：

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

或者你可以在<position-item>元素使用它：

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

---

注：::slotted中的選擇器僅限於performance concerns的反選器：

雖然::content可以採取任意的選擇器，::slotted只能採取的化合物選擇器（在括號）。這種限制的原因是在性能方面讓選擇器風格引擎友好。在v0中，很難避免由跨越陰影邊界的任意選擇器造成的性能損失。