[exportparts] support exporting via wildcards exportparts="*, primary-*"

[sorvell]

Currently, exportparts requires explicitly exporting individual parts. This requirement is extremely cumbersome in practice when many parts are used and/or multiple levels of shadow roots wish to re-export parts since the attribute size grows exponentially.

It is a common case that a element wants to re-export the set of parts provided by an element it uses. Often it wants to do this both as a pass-through and for that specific usage. This would be simple via a wildcard syntax like this:

<x-picker part="primary" exportparts="*, primary-*">

Instead this must be done manually and it's so impractical that it is simply not done in practice.

Consider a theme picker dialog that wants to export parts for each of its color pickers, and each of these wants to export parts for each of its range controls:

The range control provides parts for thumb, track, indicator. These are just parts and don't need to be exported.

The color picker uses 3 of these controls and wants to export these parts as-is and also for each color channel it uses r, g, b. It needs to export:

<x-range part="r" exportparts="thumb, track, indicator, thumb:r-thumb, track:r-track, indicator:r-indicator">...
<x-range part="g" exportparts="thumb, track, indicator, thumb:g-thumb, track:g-track, indicator:g-indicator">
<x-range part="b" exportparts="thumb, track, indicator, thumb:b-thumb, track:b-track, indicator:b-indicator">

Then the theme element needs to export for each picker, and there might be a lot of them, primary, secondary, tertiary, ...:

<x-picker part="primary" exportparts="thumb, track, indicator, r-thumb, r-track, r-indicator, 
g-thumb, g-track, g-indicator, b-thumb, b-track, b-indicator
thumb:primary-thumb, track:primary-track, indicator:primary-indicator, 
r-thumb:primary-r-thumb, r-track:primary-r-track, r-indicator:primary-r-indicator, 
g-thumb:primary-g-thumb, g-track:primary-g-track, g-indicator:primary-g-indicator, 
b-thumb:primary-b-thumb, b-track:primary-b-track, b-indicator:primary-b-indicator">

Now if the theme theme selector, is used inside a theme dialog, it needs to export:

<x-theme part="light"  exportparts="thumb, track, indicator, 
r-thumb, r-track, r-indicator, 
g-thumb, g-track, g-indicator, 
b-thumb, b-track, b-indicator
primary-thumb, primary-track, primary-indicator, 
primary-r-thumb, primary-r-track, primary-r-indicator, 
primary-g-thumb, primary-g-track, primary-g-indicator, 
primary-b-thumb, primary-b-track, primary-b-indicator,
secondary-thumb, secondary-track, secondary-indicator, 
secondary-r-thumb, secondary-r-track, secondary-r-indicator, 
secondary-g-thumb, secondary-g-track, secondary-g-indicator, 
secondary-b-thumb, secondary-b-track, secondary-b-indicator,
tertiary-thumb, tertiary-track, tertiary-indicator, 
tertiary-r-thumb, tertiary-r-track, tertiary-r-indicator, 
tertiary-g-thumb, tertiary-g-track, tertiary-g-indicator, 
tertiary-b-thumb, tertiary-b-track, tertiary-b-indicator,
thumb:light-thumb, track:light-track, indicator:light-indicator, 
r-thumb:light-r-thumb, r-track:light-r-track, r-indicator:light-r-indicator, 
g-thumb:light-g-thumb, g-track:light-g-track, g-indicator:light-g-indicator, 
b-thumb:light-b-thumb, b-track:light-b-track, b-indicat:light-b-indicator
primary-thumb:light-primary-thumb, primary-track:light-primary-track, primary-indicator:light-primary-indicator, 
primary-r-thumb:light-primary-r-thumb, primary-r-track:light-primary-r-track, primary-r-indicator:light-primary-r-indicator, 
primary-g-thumb:light-primary-g-thumb, primary-g-track:light-primary-g-track, primary-g-indicator:light-primary-g-indicator, 
primary-b-thumb:light-primary-b-thumb, primary-b-track:light-primary-b-track, primary-b-indicato:light-primary-b-indicator,
secondary-thumb:light-secondary-thumb, secondary-track:light-secondary-track, secondary-indicator:light-secondary-indicator, 
secondary-r-thumb:light-secondary-r-thumb, secondary-r-track:light-secondary-r-track, secondary-r-indicator:light-secondary-r-indicator, 
secondary-g-thumb:light-secondary-g-thumb, secondary-g-track:light-secondary-g-track, secondary-g-indicator:light-secondary-g-indicator, 
secondary-b-thumb:light-secondary-b-thumb, secondary-b-track:light-secondary-b-track, secondary-b-indicato:light-secondary-b-indicator,
tertiary-thumb:light-tertiary-thumb, tertiary-track:light-tertiary-track, tertiary-indicator:light-tertiary-indicator, 
tertiary-r-thumb:light-tertiary-r-thumb, tertiary-r-track:light-tertiary-r-track, tertiary-r-indicator:light-tertiary-r-indicator, 
tertiary-g-thumb:light-tertiary-g-thumb, tertiary-g-track:light-tertiary-g-track, tertiary-g-indicator:light-tertiary-g-indicator, 
tertiary-b-thumb:light-tertiary-b-thumb, tertiary-b-track:light-tertiary-b-track, tertiary-b-indicator:light-tertiary-b-indicator">

In practice, this 2500+ character attribute would likely be much longer as there would likely be many more theme colors.

There's probably a mistake in that. Hopefully, it's clear that this reasonable use case is nigh impossible.

If it were possible to export with a wildcard, this would simply become:

<x-range part="r" exportparts="*, r-*">
<x-picker part="primary" exportparts="*, primary-*">
<x-theme part="light"  exportparts="*, light-*">

[sorvell]

Supporting wildcards like this would be a massive help, but there's still an extremely large styling API to document, and that's pretty undesirable.

Here is an alternative idea, although I'm not sure if this is supportable in CSS: exportparts could support a special wildcard sigil that enabled parts matching on parts. Imagine the same tree as the example above, but each export part is just set as **, then these selectors would match:

theme-dialog::part(primary)::part(r)::part(track)
theme-dialog::part(primary)::part(thumb)
theme-dialog::part(indicator)

[vospascal]

i agree that a declarative api is somewhat limited if you need to pass through a lot of things @sorvell i wildcard would realy help there
that would be same for cross shadowroot aria api some of the proposals are based around the same idea

[tabatkins]

This is effectively a dupe of an older proposal in the CSSWG repo w3c/csswg-drafts#3422 ^_^

The idea there exactly matches @sorvell's idea - you can do exportparts="*" (just export them all as-is) and/or exportparts="foo-* : bar-*" (filter to foo-prefixes, replace that prefix withbar-` on export).

[Westbrook]

@tabatkins does that mean it would be useful to bring this back up at a CSSWG session for resolution?

[tabatkins]

More useful than discussing it in this venue, yes, as the editors of the spec in question (me) aren't actively watching this repo.

[Westbrook]

@tabatkins thanks for the clarity? How can we get w3c/csswg-drafts#3422 agenda +ed on the CSSWG side?