[WICG/webcomponents] [exportparts] support exporting via wildcards `exportparts="*, primary-*"` (Issue #1051)

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:

```html
<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: 

```html
<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`, ...:

```html 
<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:

```html
<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 wild card, this would simply become:

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

-- 
Reply to this email directly or view it on GitHub:
https://github.com/WICG/webcomponents/issues/1051
You are receiving this because you are subscribed to this thread.

Message ID: <WICG/webcomponents/issues/1051@github.com>