Component styling inside shadow root

[jakubslambor]

Hi. First of all, let me just say thank you for the work you're doing on Media Chrome, it's an awesome package!

Question: I want to add backdrop-filter to the media-time-range #background element, but as it's inside the shadow dom, I was unable to select it with CSS... can someone give me a hand? Is it possible to select element parts to add custom styling? Thanks 🙏

(the backdrop-blur in the screenshot was added manually through devtools)

[luwes]

Thanks for the feedback @mjamesCZ!

Currently we didn't add any CSS parts in the range related elements because it's a very dynamic component and there's still some features that we would like to include. We're a bit worried we'd open up the insides too much with CSS parts.

We'll discuss this internally but I think we'll able to unblock you soon with a new CSS variable for backdrop-filter on the input range element and the background element.

Let us know if you plan to target any other CSS props besides backdrop-filter?

btw, that player looks awesome!

[jakubslambor]

Yeah, I completely get that it's still under development, so you don't have any parts there yet. The variable would be great, and nope, just backdrop-filter 👍

[luwes]

just letting everyone know it was added as --media-range-track-backdrop-filter
https://github.com/muxinc/media-chrome/blob/main/src/js/media-chrome-range.js#L30

[jakubslambor]

Hi @luwes, just a follow up, this does not work in Safari as there, the vendor prefix -webkit- is required and it's missing from the current implementation (just backdrop-filter). Could this be fixed? 🙏

[luwes]

Thanks for the PR! Merged and released!

[jakubslambor]

Perfect! ✨