カスタム要素HTML5のLight DOM（シャドーDOM）にCSSスタイルを適用する

Question

Webコンポーネントに関するすべてのドキュメントを読んでおり、標準に従って、ユーザーが入力する要素に孤立したCSSスタイル（影）を適用することはできませんカスタム要素（光DOM）内部、つまり、ユーザは、スロット素子内に追加のコンテンツ、下記の例：の擬似要素のクラスを利用して実際に

<! - Custom element -> 
    <index-book> 
     <slot> 

       <! - Light DOM here/This content was introduced by the user -> 
       <div class = "container"> 
         <span class = "section"> Section title ... </ span> 
         <ul class = "sections"> 
           <li> ... </ li> 
           <li> ... </ li> 
           <li> ... </ li> 
         </ ul> 
       </ div> 

     </ slot> 
    </ index-book> 

、 CSS :: slotted（）は、スロット要素の最初の直接子、つまりdiv.containerにのみスタイルを適用できますが、子には適用できません。

私は2つの結論に達しました。または、DOMライトの要素の構造全体にシャドウスタイルを適用することができ、私は方法がわからない、または2番目の選択肢は、ユーザーにコンテンツを入力させるべきではないということです前の例のように複数レベルのスロットdiv ...

正解が2番目の場合は、ユーザーがカスタム要素内にコンテンツを挿入する方法と最終結果カスタムブックインデックス要素を作成しようとすると、上記の例と同じか類似しており、カスタム要素のDOMツリーに独立したスタイルを適用できます。

私はこのカスタム要素を開発するためにポリマーや他のライブラリを使用していないことに言及しなければなりません。

ありがとうございました！ web fundamentalsによると

Answer 1

：

<name-badge> 
    <h2>Eric Bidelman</h2> 
    <span class="title"> 
    Digital Jedi, <span class="company">Google</span> 
    </span> 
</name-badge> 

<style> 
::slotted(h2) { 
    margin: 0; 
    font-weight: 300; 
    color: red; 
} 
::slotted(.title) { 
    color: orange; 
} 
/* DOESN'T WORK (can only select top-level nodes). 
::slotted(.company), 
::slotted(.title .company) { 
    text-transform: uppercase; 
} 
*/ 
</style> 
<slot></slot> 

だから私はあなたがここに運の出ていると思います。

しかし、ライトドームなら、それを直接スタイルすることも、別のカスタム要素でラップすることもできます。