Применение стилей к браузерам собственных элементов, к родным ShadowDOM?

Question

После разговора Роб Додсона на веб-компонентах, где он упомянул совершенно новый «кот» ^^ и «hat» ^ Селекторы CSS, я спросил о возможностях применения стилей не только к ShadowDOM настраиваемого элемента, но и к собственным элементам браузера ShadowDOM?

Можно ли стилизовать элементы из ShadowDOM? В каких браузерах и как? Единственная актуальная статья, которую я нашел, - это Димитрий Глазков на 'What the Heck is Shadow DOM?', где он прокладывает путь к поддеревьям ShadowDOM с помощью псевдоселекторов и правил -webkit-appearance: none;.

Answer 1

Благодаря статусу проекта CSS Scoping Module Level 1 будучи в состоянии измениться в любой момент, мой оригинальный подход не работал очень долго.

В Chrome V33 + вам придется включить Enable Experimental Web Platform Features в chrome://flags на для ниже код для работы.

---

Начиная с Chrome Canary V33 и его селектор кошачьей ^^ ответ: Да!
Обновление 2014-03-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)); 
} 

Answer 2

Возможно, по крайней мере, в 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; 
} 

According to Rob Dodson himself можно использовать ^ и ^^ селекторы стиля родной Shadow DOM. Таким образом, это правило должно работать (Chrome Canary, я считаю):

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