为什么在 Shadow DOM 中像 `:where(:root, :host) { --my-var: value }` 这样定义的 CSS 变量不起作用？

Question

我注意到我在 Web 组件（使用 Shadow DOM）中定义的一些 CSS 变量没有按预期运行。看来使用

:where(:root, :host)

导致了该问题。当我切换到 :root, :host
时，变量似乎工作正常。谁能解释一下为什么会发生这种情况？

这是代码。您还可以在CodePen中看到这一点。

<html>

<body>
  <!-- 👇️ Define web component -->
  <script>
    class MyComponent extends HTMLElement {
      constructor() {
        super()
        this.attachShadow({ mode: 'open' }).innerHTML = `
          <style>
            // 👇️ it works if you drop ":where"
            :where(:root, :host) {
              --my-color: red;
            }
            span {
              color: var(--my-color);
            }
          </style>
          <span>This should be red</span>
        `
      }
    }

    customElements.define('my-component', MyComponent)
  </script>

  <!-- 👇️ Render web component -->
  <my-component />
</body>

</html>

我发现使一切按预期工作。

但是，问题是代码是由 CSS 框架（Panda CSS）自动生成的，所以我无法直接更改变量定义。

以下是 GitHub 存储库中的相关行： https://github.com/chakra-ui/panda/blob/577dcb9d855c705e364aa2f662492f53e4034bfc/packages/generator/src/generator.ts#L11

Answer 1

来自 CSS 范围规范 3.2.2。从 Shadow 中选择 Shadow 主机

影子主机位于其托管的影子树之外，因此通常无法被在影子树上下文中评估的任何选择器作为目标（因为选择器仅限于单个树），但有时能够从影子树上下文内部设置它的样式。

出于选择器的目的，影子主机也出现在其影子树中，影子树的内容被视为其子项。（换句话说，影子主机被视为替换影子根节点。）

当在其自己的影子树中考虑时，影子主机毫无特色。 仅允许 :host、:host() 和 :host-context() 伪类与其匹配。

规范编辑Tab Atkins 指出：

宿主元素不匹配 :where() 目前符合规范（除非明确指定，否则没有任何元素与元素匹配），但是 :where() 和 :is() 绝对是特殊情况，因为它们有效选择器语法，而不是选择器本身。我认为允许它们匹配宿主元素是合理的，只要它们包含的选择器之一匹配即可。

所以他认为规范应该允许它，但目前似乎还没有实现。

为什么在 Shadow DOM 中像 `:where(:root, :host) { --my-var: value }` 这样定义的 CSS 变量不起作用？

问题描述投票：0回答：1

1个回答

最新问题

为什么在 Shadow DOM 中像 `:where(:root, :host) { --my-var: value }` 这样定义的 CSS 变量不起作用？

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1