Media Chrome picks up CSS variables from my globals file

[ADTC]

In my globals file, there are CSS variables defined in :root as follows:

:root {
  --border-radius: 8px !important;
  --primary: #aabbcc !important;
  // and others
}

These are getting picked up by Media Chrome and applied to the buttons. I can't find an effective way to avoid this.

[ADTC]

Workaround:

As of now, I'm manually overriding the role='button' attribute on each of the buttons. It loses the ARIA benefits, sure, but it gets the job done.

Worst part though is, I have to do a useEffect in React to do this, because directly applying to the component doesn't stick. (I suppose if you're using regular HTML, you may not have to worry about this.)

  useEffect(() => {
    // Directly setting the attribute doesn't work, because
    // it gets overwritten by the media-chrome library.
    playButtonRef.current?.setAttribute('role', 'generic')
    muteButtonRef.current?.setAttribute('role', 'generic')
  })

[luwes]

thanks for the feedback! which CSS vars are causing that?

Media Chrome doesn't have such generic CSS vars like --border-radius or --primary I believe so something else must be going on.

note that it's normal that CSS vars become available to all child elements even in the shadow DOM.

[ADTC]

The problem is, I have global css from a library (pico css) which applies these variables to [role=button] css selector. I thought media chrome is sandboxed and aren't affected by such global css. I guess that isn't the case.