docs icon indicating copy to clipboard operation
docs copied to clipboard

:root::part(some-input) doesn't seem to work

Open davidmaxwaterman opened this issue 4 years ago • 2 comments

https://github.com/fergald/docs/blob/master/explainers/css-shadow-parts-1.md#the-all-buttons-in-this-app-should-be-blue-theming-problem

Indicates that theming could be acheived by adding styles like:

:root::part(some-input) { ... }

However, while I could get the exportparts attribute to work as described, I wasn't able to style them from a rule involving :root.

It seems to me that it should be:

:root ::part(some-input) { ... }

ie with a space between :root and ::part.

Here's an example.

What do you think?

davidmaxwaterman avatar Aug 25 '21 05:08 davidmaxwaterman

Theming was never standardised and there is no implementation. I should update this doc to reflect what has made it to reality.

fergald avatar Aug 25 '21 14:08 fergald

This part of your explainer is actually implemented in all modern browsers...but the part I mentioned is not correct, and doesn't even make sense since :root::part() would be selecting the document (?) with a part on it....putting a space in it actually does work - check out the example I supplied - and does make sense - ie in the root DOM, anything with a part on it.

It might be worth it to link to the caniuse pages for the features that do work, eg:

https://caniuse.com/mdn-html_global_attributes_exportparts

davidmaxwaterman avatar Aug 25 '21 15:08 davidmaxwaterman