如何使用 CSS ::主题选择器

Posted 2023-02-21

【中文标题】如何使用 CSS ::主题选择器

【英文标题】：how to use the CSS ::theme selector

【发布时间】：2021-10-16 22:38:40

【问题描述】：

ive 开始制作 html/CSS/Vanilla JS Web 组件库，到目前为止一切都进展顺利。 我使用典型的 ::part 和所有这些，但我也偶然发现了 accros ::theme 选择器，它应该可以快速访问样式，而无需创建者进行不必要的设置。

问题是，我 - 无论我尝试过什么 - 似乎都无法让 ::theme 选择器工作，有没有人可以帮助我？

screendump 来自https://meowni.ca/posts/part-theme-explainer/，尝试过关注，但我不知道这个选择器是否仍处于实验阶段？如果它有效，它真的会让我的组件样式更容易！

【问题讨论】：

我在 MDN 或 caniuse.com 中找不到::theme()，所以我猜没有浏览器支持它。您链接到的页面还显示“如前所述，此规范仍在制定中，我们没有可用于生产的 shim。”

@gunr2171 它是一个选择器，属于Shadow DOM Framework

我刚刚发现developer.mozilla.org/en-US/docs/Web/CSS/::part 也在底部链接到它 -> github.com/fergald/docs/blob/master/explainers/… 不知道该怎么做，它还在进行中吗？

【参考方案1】：

遗憾的是 ::theme 选择器没有成功

经过大量挖掘，我发现 ::theme 选择器是一个未实施的提案 尽管在底部的“另见”下方提到了https://developer.mozilla.org/en-US/docs/Web/CSS/::part。 然后我发现这个解释器问题已关闭，确认 ::theme 没有成功https://github.com/fergald/docs/issues/4 因此，自 2020 年 9 月 15 日起，CSS W3C 编辑器草案中的 CSS Shadow 部分文档中也没有 ::theme 选择器，请参见下文：https://drafts.csswg.org/css-shadow-parts/

我不知道是否有人会拿起火炬并实现这个伪选择器，但我确实希望如此，因为我会看到它经常被使用，至少在我的需要中。

希望这个问题和答案能帮助其他人，而不是花费大量时间进入这个兔子洞 :)