Два компилятора теневого пирсинга устарели, как указано в https://www.chromestatus.com/features/6750456638341120
Затем какая подстановка для достижения того же, или эта функция теневого пирсинга была полностью оставлена?
::shadow и /deep/ были удалены для нарушения инкапсуляции.
Замены являются:
:host-context. Читайте здесь: http://www.html5rocks.com/en/tutorials/webcomponents/shadowdom-201/По сравнению с полимером 2:
::shadow (селектор теневого пирсинга) - прямой замены не существует. Вместо этого должны использоваться пользовательские свойства CSS. Полимер 2: Пользовательские свойства CSS
/deep/ - существует какая-то замена, определяя :host > * { ... } (применяет набор правил для всех детей верхнего уровня в дереве теневого дерева хоста, который не противоречит правилу в основной документ).
Для получения более подробной информации проверьте Заметки по обновлению Polymer 2
На момент написания статьи вы можете попробовать ::part and ::theme с Chrome 73 и выше:
https://www.chromestatus.com/feature/5763933658939392
<submit-form>
#shadow-root
<x-form exportparts="some-input, some-box">
#shadow-root
<x-bar exportparts="some-input, some-box">
#shadow-root
<x-foo part="some-input, some-box"></x-foo>
</x-bar>
</x-form>
</submit-form>
<x-form></x-form>
<x-bar></x-bar>
Вы можете стилизовать все входы с помощью:
:root::part(some-input) { ... }
Есть полная документация, как это работает:
https://github.com/fergald/docs/blob/master/explainers/css-shadow-parts-1.md
Это может как-то решить вашу проблему, но я все еще скучаю по тем дням, когда я разрабатывал встроенные твиты с помощью ::shadow.
Боже, это ужасно Как мы получаем :: тень назад?
":: V-Deep" работает на меня. Например:
.menu {
// stuff
}
/deep/.sub-menu { // override submenu
.sub-menu__mini {
//stuff
}
a, a:hover {
//stuff
}
}
}
будет выглядеть так:
.menu {
// stuff
}
::v-deep .sub-menu { // override submenu
.sub-menu__mini {
//stuff
}
a, a:hover {
//stuff
}
}
}