スタイルをブラウザー独自の要素に適用するか、ネイティブ ShadowDOM に適用しますか?

Question

Web コンポーネントに関する Rob Dodson の講演の後、彼は真新しい「猫」について言及しました。 ^^ そして「帽子」 ^ CSS セレクター、カスタム要素の ShadowDOM だけでなく、ブラウザーのネイティブ要素の ShadowDOM にもスタイルを適用できる可能性について質問しました。

ShadowDOM から要素をスタイル設定することはできますか?どのブラウザでどのように?私が見つけた唯一の関連記事は、Dimitry Glazkov による「」でした。Shadow DOM とは一体何ですか?' では、彼は疑似セレクターを使用して ShadowDOM サブツリーに到達する方法を説明しています。 -webkit-appearance: none; ルール。

Answer 1

ドラフトの状況により、 CSS スコープ モジュール レベル 1 いつでも変更できるため、私の当初のアプローチは長くは機能しませんでした。

で Chrome v33以降 あなたは向きを変える必要があります Enable Experimental Web Platform Features で chrome://flags 以下のコードが機能するにはオンにします。

---

で始まります Chrome カナリア v33 とその猫セレクター ^^ 答えは次のとおりです。 はい！
2014 年 3 月 30 日の更新: Chrome カナリア v35 以降 セレクターの最新バージョン、いわゆる /deep/ セレクタ.

あらゆる境界を越えてスタイルを設定し、ネイティブ要素にも機能します。

見る： http://codepen.io/Volker_E/pen/jsHFC

/* ... Example for applying to all h2 elements, no matter if DOM or any ShadowDOM subtree ... */
:root ^^ h2 {
    font-family: "Arial Black", sans-serif;
}

/* Cr 33+: The "cat" also works on native elements' ShadowDOM */
video ^^ input[type="button"]:first-child {
    opacity: .75;
    -webkit-filter: drop-shadow( .2rem .2rem .2rem hsla( 5, 100%, 50%, 1 ) );
}

/* Cr 35+: /deep/ also works on native elements' ShadowDOM */
video /deep/ input[type="button"]:first-child {
    opacity: .75;
    -webkit-filter: drop-shadow( .2rem .2rem .2rem hsla( 5, 100%, 50%, 1 ) );
}

Answer 2

少なくともクロムで可能です。<input type="date">のシャドウDOMをチェックすると、次のようになります。

<input type="date">
  #document-fragment
    <div part="-webkit-datetime-edit" id="date-time-edit">
      <div part="-webkit-datetime-edit-fields-wrapper">
        <span role="spinbutton" aria-valuetext="blank" aria-valuemin="1" aria-valuemax="12" aria-help="Month" part="-webkit-datetime-edit-month-field">mm</span>
        <div part="-webkit-datetime-edit-text">/</div>
        <span role="spinbutton" aria-valuetext="blank" aria-valuemin="1" aria-valuemax="31" aria-help="Day" part="-webkit-datetime-edit-day-field">dd</span>
        <div part="-webkit-datetime-edit-text">/</div>
        <span role="spinbutton" aria-valuetext="blank" aria-valuemin="1" aria-valuemax="275760" aria-help="Year" part="-webkit-datetime-edit-year-field">yyyy</span>
      </div>
    </div>
</input>

.

それからあなたは別々の疑似要素をスタイルすることができます：

::-webkit-datetime-edit-year-field {
  font-weight: bold;
}

.

Rob Dodson hemsels によると、^と^^セレクタを使用してネイティブシャドウDOMをスタイル化することができます。だからこの規則はうまくいくべきです（Chrome Canary、私は信じる）：

input[type="date"] ^ [part="-webkit-datetime-edit-year-field"] {
  font-weight: bold;
}

.