Search code examples
htmlcssweb-componentshadow-dom

how to use the CSS ::theme selector


ive started making a HTML/CSS/Vanilla JS web component library, and so far everything is going great. im using the typical ::part and all that, but i stumbled accros ::theme selector aswell, which is supposed to give quick access to styling without a creator having to set up more than necesarry.

problem is, i - whatever ive tried - can't seem to the get the ::theme selector work, is there anyone who can help me out ?

screendump is from https://meowni.ca/posts/part-theme-explainer/, tried following but i dont know if this selector is still experimental ?, it would really make styling my components alot easier if it worked !

this screen is from following link that talks about it


Solution

  • Sadly the ::theme selector did not make the cut

    After a lot of digging, I've found the ::theme selector was a proposal which didn't get implemented
    Although mentioned here https://developer.mozilla.org/en-US/docs/Web/CSS/::part at the bottom under "See also". I then found this explainer issue that was closed, confirming that the ::theme did not make the cut https://github.com/fergald/docs/issues/4
    The ::theme selector is therefor also not in the docs of CSS Shadow parts as of the CSS W3C Editors draft from 15th September 2020, see it below:
    https://drafts.csswg.org/css-shadow-parts/

    I don't know if anyone will pick up the torch and implement this pseudo selector, but i surely do hope so, as i would see it frequently used, at least in my needs.

    Hope this question and answer will help someone else out and not spend tons of time going down this rabbit-hole :)