用类样式覆盖数据属性样式

Question

我目前正在使用本机 popover API 进行无头实现，以提供跨浏览器的支持。我的例子是使用 Tailwind。

我在 popover api 中遇到了一个有趣的问题，我们有由用户代理样式表（浏览器）为本机 API 提供的样式。对于不受支持的浏览器，我们使用 polyfill，但该 polyfill 使用 data 属性。

数据属性又具有与类相同的特殊性。这意味着，对于不受支持的浏览器，用户无法覆盖样式表声明的样式，除非它是内联样式或

!important

。

我曾考虑过使用

@layer

，但作为库作者，我似乎无法控制这一点，用户需要自己做。有什么想法吗？

我尝试看看是否可以弄乱@layer，将它们的类添加为内联样式（看到这将是CSS框架的问题），尝试使用where子句。

我不确定如何继续前进。也许是某处的 where 子句？

Answer 1

我能够使用以下内容让级联覆盖样式：

document.head.insertBefore(styleNode, document.head.firstChild);

很想看看其他方法如何！