如何使用引用影子根外元素的 css 选择器

Question

我需要根据附加到 <body> 的 class 设置组件样式。
logo-placeholder 包含在影子根中。
body当然在外面。

这是我想要实现的：

.logo-placeholder {
  background: url(logo_LIGHT.png);
}

body.dark .logo-placeholder {
  background: url(logo_DARK.png);
}

Answer 1

一个带有阴影 dom 的大点，即 self-contained。 CSS 也是如此。将每个组件视为一个 HTML 文档。

如果你想在占位符内设置元素的样式，你需要做这样的事情。

<body>
  <custom-element class="dark-background"></custom-element>
</body>

然后在 custom-element 中，根据 host 的 class 设置 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);
}

Answer 2

完整的解决方案如下：

:host-context(body.dark) .logo-placeholder {
  background: url(logo_DARK.png);
}

:host-context(body.dark) 意味着选择器 body.dark 必须在宿主容器的上下文中进行评估，而不是基于 shadow-DOM。这就是它起作用的原因。

每当我们希望自定义元素根据其在 DOM 中的位置设置样式而不是遵守 shadow-DOM 规则时，我们可以使用 :host-context() selector.

[: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-theme class is applied to <body>.

如何使用引用影子根外元素的 css 选择器

How to use a css selector that refers to a element outside the shadow root

html

css

shadow-dom