::part(): Missing information

[estelle]

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:

::part() = ::part( <ident>+ )

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: 1a7ab87
• Document last modified: 2022-09-27T04:25:08.000Z

[BobH-Official]

A related issue for ::part(). #31932

[hamishwillee]

@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.