Начиная с Chrome 63, вы не можете использовать селекторы пронзания тени ::shadow и /deep/ для стилизации содержимого внутри теневого корня.
- Комбинатор
/deep/будет действовать как селектор потомков.x-foo /deep/ divбудет работать какx-foo div. - Псевдоэлемент
::shadowне будет соответствовать ни одному элементу.
Решение об удалении
::shadow и /deep/ были объявлены устаревшими в Chrome версии 45. Такое решение было принято всеми участниками встречи по веб-компонентам в апреле 2015 года .
Основная проблема с селекторами, проникающими сквозь тень, заключается в том, что они нарушают инкапсуляцию и создают ситуации, когда компонент больше не может изменять свою внутреннюю реализацию.
Спецификация CSS Shadow Parts продвигается как альтернатива селекторам пронзания тени. Shadow Parts позволит автору компонента выставлять именованные элементы таким образом, чтобы сохранялась инкапсуляция и при этом авторы страниц могли стилизовать несколько свойств одновременно.
Что делать, если на моем сайте используются ::shadow и /deep/?
Селекторы ::shadow и /deep/ влияют только на устаревшие компоненты Shadow DOM v0. Если вы используете Shadow DOM v1, вам не нужно ничего менять на своем сайте.
Вы можете использовать Chrome Canary , чтобы проверить, не сломался ли ваш сайт из-за этих новых изменений. Если вы заметили проблемы, попробуйте удалить любое использование ::shadow и /deep/ . Если удалить использование этих селекторов слишком сложно, рассмотрите возможность перехода с нативного shadow DOM на теневой DOM polyfill. Вам нужно будет внести это изменение только в том случае, если ваш сайт использует нативный shadow DOM v0.