如何通过元素属性为CSS的:root伪元素设置条件样式？

你不需要改变现有的JS属性设置逻辑，只需要调整CSS选择器即可。

在HTML文档中，:root伪元素本质上就是<html>元素的别名，所以当你给documentElement（即<html>标签）设置属性后，直接用:root结合属性选择器就能匹配到目标元素。

修改后的CSS代码如下：

:root[myattr="true"] { direction: rtl; }
:root[myattr="false"] { direction: ltr; }

JS代码保持不变：

doc.documentElement.setAttribute('myattr', true);

这样设置后，样式就会通过:root伪元素选择器生效，同时属性依然是设置在DOM的根元素上，完美适配你的需求。

内容的提问来源于stack exchange，提问作者einpoklum