Применение стилей к собственным элементам браузера, к собственному ShadowDOM?
-
22-12-2019 - |
Вопрос
После выступления Роба Додсона о веб-компонентах, где он упомянул совершенно нового «кота» ^^
и «шляпа» ^
CSS-селекторы, я спросил о возможностях применения стилей не только к ShadowDOM пользовательского элемента, но и к ShadowDOM собственных элементов браузера?
Можно ли стилизовать элементы из ShadowDOM?В каких браузерах и как?Единственная соответствующая статья, которую я нашел, была написана Дмитрием Глазковым на тему «Что такое Shadow DOM?', где он описывает доступ к поддеревьям ShadowDOM с помощью псевдоселекторов и -webkit-appearance: none;
правила.
Решение
В связи со статусом проекта Модуль определения области CSS, уровень 1 Поскольку я мог измениться в любой момент, мой первоначальный подход работал недолго.
В Хром v33+ тебе придется повернуть Enable Experimental Web Platform Features
в chrome://flags
включено, чтобы приведенный ниже код работал.
Начиная с Хром Канарейка v33 и его селектор кошек ^^
ответ: Да!
Обновление 30 марта 2014 г.: Хром Канарейка 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 ) );
}
Другие советы
Это возможно, по крайней мере, в 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;
}