Как использовать селектор css, который ссылается на элемент вне теневого корня
Мне нужно стилизовать компонент на основе класса, прикрепленного к <body>.logo-placeholder содержится внутри теневого корня.body, конечно же, снаружи.
Вот чего я хотел бы добиться:
.logo-placeholder {
background: url(logo_LIGHT.png);
}
body.dark .logo-placeholder {
background: url(logo_DARK.png);
}
Ответы 2
Огромная точка с автономным теневым домом. Это касается и CSS. Думайте о каждом компоненте как о собственном HTML-документе.
Если вы хотите стилизовать элемент внутри заполнителя, вам нужно сделать что-то вроде этого.
<body>
<custom-element class = "dark-background"></custom-element>
</body>
Затем внутри custom-element стилизуйте свой div на основе класса хозяин.
:host(.dark-background) .logo-placeholder {
background: url(logo_DARK.png);
}
Другой способ — использовать свойства CSS.
body custom-element {
--logo-placeholder-background: 'logo_LIGHT.png';
}
body.dark custom-element {
--logo-placeholder-background: 'logo_DARK.png';
}
Затем объявите следующее внутри вашего custom-element
.logo-placeholder {
--background-fallback: 'logo_LIGHT.png';
background: url(var(--logo-placeholder-background, --background-fallback);
}
Я действительно нашел решение с :host-context(). Я постараюсь обновить ваш ответ, когда stackoverflow позволит мне это сделать.
Просто сделайте свой собственный ответ и установите его как правильный, чтобы люди могли ссылаться на эту тему в будущем. Хорошо, что в итоге все обошлось. :)
Полное решение будет следующим:
:host-context(body.dark) .logo-placeholder {
background: url(logo_DARK.png);
}
:host-context(body.dark) означает, что селектор body.dark должен оцениваться в контексте хост-контейнера, а не на основе теневого DOM. Вот почему это работает.
Всякий раз, когда мы хотим, чтобы пользовательский элемент был оформлен на основе его положения в DOM, а не подчинялся правилам теневого DOM, мы можем использовать :host-context() селектор.
[
:host-context()] allows a custom element, or anything within that custom element's shadow DOM, to apply different styles based on its position within the outer DOM or classes/attributes applied to ancestor elements.
Another typical use would be to allow inner elements to react to classes or attributes on any ancestor elements - for example, applying a different text color when a
.dark-themeclass is applied to<body>.
Конечно, но это было бы неудобно. Я хочу настроить тело на
<body class = "dark">и хочу, чтобы компоненты реагировали на это. Кроме того, использование переменных css означает, что мне нужно установить их вне компонента, что еще больше нарушает разделение.