Usage of experimental feature of CSS --> element.pseudo();

Question

Has anyone tried to use a new feature of CSS, in others words this feature

https://developer.mozilla.org/en-US/docs/Web/API/CSSPseudoElement

const element = document.querySelector('q');

const cssPseudoElement = element.pseudo('::before');

I always receive that info in console --> Uncaught TypeError: element.pseudo is not a function ...

I have tried to recreate this on Firefox developer version, but did not receive the same result. I have turned a needed flag about:confing --> dom.css_pseudo_element.enabled.

To be cleared the example that is shown in above documentation.

Regards,

Answer 1

At the time of writing (September 2020), pseudo() is still very much a work in progress. You should not expect it to work at this early stage.

See:

• https://www.w3.org/TR/css-pseudo-4/#dom-element-pseudo

and:

• https://github.com/w3c/csswg-drafts/issues/3607
• https://github.com/w3c/csswg-drafts/issues/3603

---

Instead, the standard approach for accessing a pseudo element like ::before or ::after is:

var pseudoElementStyle = window.getComputedStyle(myElement, '::before');

See:

• https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle