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

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

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


browser css web-component css-selectors shadow-dom
person Volker E.    schedule 18.11.2013    source источник
comment
См. Мой недавний ответ здесь для получения дополнительной информации о стилях элементов в ShadowDOM. Селекторы Cat и Hat больше не поддерживаются.   -  person TylerH    schedule 30.12.2014

Ответы (2)


arrow_upward
2
arrow_downward

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

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

Начиная с Chrome Canary v33 и его селектора cat ^^, ответ будет: Да!
Обновление 2014-03-30: Chrome Canary 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 ) );
}
person Volker E.    schedule 18.11.2013

arrow_upward
1
arrow_downward

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

Согласно Сам Роб Додсон может использовать ^ и ^^ селекторы для стилизации нативной Shadow DOM. Итак, это правило должно работать (я считаю, Chrome Canary):

input[type="date"] ^ [part="-webkit-datetime-edit-year-field"] {
  font-weight: bold;
}
person Pavlo    schedule 18.11.2013
comment
Хороший ответ, об этом уже говорил Глазков. Но если нет псевдоэлементов, прикрепленных через атрибуты, как в <video>? И в какой версии браузера это поддерживается? - person Volker E.; 18.11.2013
comment
@VolkerE. Тогда вам нужно использовать другие селекторы, такие как nth-child() и nth-of-type(). - person Pavlo; 18.11.2013