In CSS, how do I conditionally style the :root pseudo-element using attributes?

General
1

I have some JS which needs to effect some styling of an entire rendered HTML document. What I current use is the following CSS:

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

plus setting an attribute on the document element:

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

but - for reasons (which should not be relevant), I want the CSS to style the :root pseudo-element, not the <html> element. My question is: How can I select :root based on the attribute value? It’s not as though I can set the attribute on :root itself, as it is not part of the DOM.