Веб-компоненты: Смежные селекторные ролики у детей

Question

Как вы можете настроить таргетинг на следующие веб-компоненты? (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) в контейнере (если это также Shadow 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 трудно избежать штрафа за производительность, вызванного произвольным селектором, который пересекает границы тени.