Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
sorvell opened this issue Mar 8, 2024 · 6 comments
Open

Comments

@sorvell
Copy link

sorvell commented Mar 8, 2024

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
Copy link
Author

sorvell commented Mar 8, 2024

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
Copy link

vospascal commented Mar 13, 2024

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
Copy link

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
Copy link
Collaborator

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

@tabatkins
Copy link

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
Copy link
Collaborator

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

4 participants