4

Web コンポーネントに関する Rob Dodson の講演の後、彼はまったく新しい "cat"^^および "hat" ^CSS セレクターについて言及しました。カスタム要素の ShadowDOM だけでなく、ブラウザーのネイティブ要素にもスタイルを適用する可能性について尋ねました。要素の ShadowDOM?

ShadowDOM から要素をスタイルすることは可能ですか? どのブラウザで、どのように？私が見つけた唯一の関連記事は、「What the Heck is Shadow DOM? 」に関する Dimitry Glazkov によるものでした。-webkit-appearance: none;ここで、彼は疑似セレクターとルールを使用して ShadowDOM サブツリーに到達するようにレイアウトしています。

4

2 に答える 2

2

CSS Scoping Module Level 1のドラフトの状態がいつでも変更できる状態であるため、私の最初のアプローチはあまり長く機能しませんでした。

Chrome v33 以降では、以下のコードを機能させるために有効にする必要がありますEnable Experimental Web Platform Features。chrome://flags

Chrome Canary v33とその cat セレクターから始めて^^、答えは:はい!
2014 年 3 月 30 日の更新: Chrome Canary v35+は、セレクターの最新バージョン、いわゆる/deep/selectorをサポートします。

すべての境界にわたってスタイルを設定し、ネイティブ要素でも機能します。

参照: 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 ) );
}
于 2013-11-18T09:37:27.223 に答える
1

少なくともChromeでは可能です。Shadow DOM をチェックすると、次の<input type="date">ように表示されます。

<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 自身による^と、^^セレクターを使用してネイティブの Shadow DOM のスタイルを設定することが可能です。したがって、このルールは機能するはずです（Chrome Canary、私は信じています）：

input[type="date"] ^ [part="-webkit-datetime-edit-year-field"] {
  font-weight: bold;
}
于 2013-11-18T09:20:49.530 に答える