content
content copied to clipboard
mdn
::part(): Missing information
MDN URL
https://developer.mozilla.org/en-US/docs/Web/CSS/::part
What specific section or headline is this issue about?
all of it
What information was incorrect, unhelpful, or incomplete?
there are tons of limits on using ::part(), not of which are described.
What did you expect to see?
Selecting a Shadow Element: the ::part() pseudo-element
The ::part() pseudo-element allows you to select elements that have been exposed via a part attribute. The syntax is:
The ::part() pseudo-element only matches anything when the originating element is a shadow host. If the originating element’s shadow root’s part element map contains all of the specified <ident>s, ::part() matches the element or elements keyed to that <ident>. Otherwise, it matches nothing. For example, if you have a custom button that contains a "label" element that is exposed for styling (via part="label"), you can select it with #the-button::part(label). Part names act similarly to classes: multiple elements can have the same part name, and a single element can have multiple part names.
A tabstrip control might have multiple elements with part="tab", all of which are selected by ::part(tab).
If a single tab is active at a time, it can be specially indicated with part="tab active" and then selected by ::part(tab active) (or ::part(active tab), as order doesn’t matter).
The ::part() pseudo-element can take additional pseudo-classes after it, such as x-button::part(label):hover, but never matches the structural pseudo-classes or any other pseudo-classes that match based on tree information rather than local element information.
The ::part() pseudo-element can also take additional pseudo-elements after it, such as x-button::part(label)::before, but never match additional ::part()s. For example, x-panel::part(confirm-button)::part(label) never matches anything. This is because doing so would expose more structural information than is intended.
If the <x-panel>’s internal confirm button had used something like part="label => confirm-label" to forward the button’s internal parts up into the panel’s own part element map, then a selector like x-panel::part(confirm-label) would select just the one button’s label, ignoring any other labels.
Do you have any supporting links, references, or citations?
https://w3c.github.io/csswg-drafts/css-shadow-parts/#part
Do you have anything more you want to share?
No response
MDN metadata
Page report details
- Folder:
en-us/web/css/_doublecolon_part - MDN URL: https://developer.mozilla.org/en-US/docs/Web/CSS/::part
- GitHub URL: https://github.com/mdn/content/blob/main/files/en-us/web/css/_doublecolon_part/index.md
- Last commit: https://github.com/mdn/content/commit/1a7ab87dc2ce1e8a90b2155eeb13efbc8a50e845
- Document last modified: 2022-09-27T04:25:08.000Z
@estelle Were you planning on doing this work. I could take it on as part of #31971 but it sounds like you have a grip on what you want.
Could you elaborate on the following:
If the
<x-panel>’sinternal confirm button had used something like part="label => confirm-label" to forward the button’s internal parts up into the panel’s own part element map, then a selector like x-panel::part(confirm-label) would select just the one button’s label, ignoring any other labels.
