Giving up on trying to figure out the right sytax on this. I have a custom element built w/stenciljs. The shadowdom component has two @media queries that are used to show desktop or mobile interface: @media screen and (min-width: 960px) and @media screen and (max-width: 959.99px).
Works great. So far so good.
What I’d like to be able to do is, on the consuming html/js/ts page, access the stylesheets and change the breakpoint. It happens to be a vue app, but that doesn’t really matter since it is all down to the js function. I can get my custom element, call it ce, and get in and read ce.shadowRoot.adoptedStyleSheets, flip through them and get the two CSSMediaRules objects that I need. It’s the code to alter them that’s killing me. I can kind of see how to alter a specific style, like change the font color from black to green, but the media query is just beyond my capabilities.
I don’t suppose anyone has code they could share? And apparently you can’t use css variables in media queries, even when you set them in :host, not :root. Which makes sense, I guess, even if I don’t like it. 🙂
TIA!