web-dev-qa-db-ja.com

CSSセレクターで/ deep /と:: shadowはどういう意味ですか？

Polymerを見ると、Chrome 37の開発者ツールのStylesタブに次のCSSセレクターがあります。

enter image description here

擬似セレクター::shadowを含むセレクターも見ました。

それでは、CSSセレクターの/deep/と::shadowはどういう意味ですか？

csshtml5polymerweb-componentshadow-dom
63
Drew Noakes

Joel H.がコメントで指摘しているように、Chromeは/deep/コンビネーターを非推奨にしており、IEで構文エラーを返します。

HTML5 Webコンポーネントは、CSSスタイルの完全なカプセル化を提供します。

この意味は：

  • コンポーネント内で定義されたスタイルがリークしてページの残りの部分に影響を与えることはできません
  • ページレベルで定義されたスタイルは、コンポーネント自体のスタイルを変更しません

ただし、シャドウDOM内で定義されたコンポーネント要素の表示を操作するページレベルのルールが必要な場合があります。これを行うには、/deep/をCSSセレクターに追加します。

したがって、示されている例では、html /deep/ [self-end]は、self-end属性を持つhtml（最上位）要素の下にあるすべての要素を選択しています。

シャドウルート内で選択した要素をrequireする場合、その親要素で::shadow擬似セレクターを使用できます。

考慮してください：

<div>
  <span>Outer</span>
  #shadow-root
  <my-component>
    <span>Inner</span>
  </my-component>
</div>

セレクタhtml /deep/ spanは、両方の<span>要素を選択します。

セレクタ::shadow spanは、内側の<span>要素のみを選択します。

詳細については、W3Cの CSS Scoping Module 仕様をご覧ください。

75
Drew Noakes