Webコンポーネント：子どもの隣接兄弟セレクタ

Question

どのようにWebコンポーネントで次のターゲットを設定できますか？ （ShadomDom V1 &カスタム要素V1）以下で

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

...

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

私は改ページ要素のスタイルの中に置く場合、それは動作しません。私が:host + :hostをページ区切り項目の中に入れた場合、それは機能しません。

どのようにハッキングなしでこれを達成できますか？ これは合成可能性に大きな問題があるようには見えません...

Answer 1

デフォルトでは動作するはずです（マージン-はになりますか？）。

（それはまた、シャドウDOMの場合）あなたはコンテナに:not(:first-child)を使用することができない場合：

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

それとも<position-item>要素でそれを使用することができます。

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

---

注釈：::slottedのセレクタは、performance concernsのためのカスケードセレクタに制限されています：任意のセレクタをとることができる

::contentが、::slottedのみ（括弧内）の化合物の選択を取ることができます。この制限の理由は、パフォーマンスの点でセレクタスタイルエンジンをフレンドリにすることです。 v0では、シャドウ境界を横切る任意のセレクタによるパフォーマンスの低下を回避することは困難です。