[csswg-drafts] [css-shadow-parts] consider moving part-mapping to style rules

fergald has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-shadow-parts] consider moving part-mapping to style rules ==
This came up in a meeting with Salesforce. It seems reasonable to consider this option.

The current [spec](file:///home/fergal/sshfs/github/w3c/csswg-drafts/css-shadow-parts-1/Overview.html#partmap-attr) provides the partmap attribute to allow a part inside a sub-component to be stylable from outside the containing component. This means that forwarding rules are spread across many elements, e.g.

```
<x-bar>
  # shadow
  <x-foo partmap="inner outer">...</x-foo>
  <x-foo partmap="inner outer">...</x-foo>
  <x-buz partmap="buz-part">...</x-foo>
</x-bar>
```

An possible alternative to that would be to include the part-mapping information in the style rules. There are several ways we could do this e.g.

```
<x-bar>
  # shadow
  <style>
    /* this causes x-bar::part(outer) to match elements inside x-foo */
    x-foo::part(inner) { @outer-name(outer) } 
    /* expose buz-part without renaming */
    x-buz::part(buz-part) { @outer-name() } 
  </style>
  <x-foo>...</x-foo>
  <x-foo>...</x-foo>
</x-bar>
```

Alternative ways of expressing this could be e.g.

```
@partmap myMap::x-foo {
 inner => outer; 
}

x-foo {
    @partmap(inner, outer);
}

x-foo::part(inner) { outer-name: outer } 
```

Good points:
- all mappings are centralized
  - although they may be spread through multiple style elements inside the shadow root, so not necessarily centralized
  - exposing the part name map via IDL is something we want, no matter how it expressed and anyone who wants to reason about the mapping should use that
- can compress many repetitive partmaps into a single CSS rule
- makes it even easier to emulate ::theme using ::part, each shadow tree can just do `::part(theme-name) { @outer-name()}` to expose all the theme-name parts
- could also be used to add part names to elements, e.g. `.some-class { @outer-name(some-part) }` would be the same as adding `part="some-part"` to all of the elements of class "some-class"

Possible objections:
- all mappings are centralized
- these are not style rules, so should not be in the style sheet
- unclear if there are implementation problems with this

This is a fairly radical departure from the current spec and if people think this is a great/terrible idea, I'd like to hear that quickly. I think there's no difference in what can be expressed in either case, the main points are:
- the ability to expressing mappings for many elements in a compact form
- centralized vs distributed


Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/2904 using your GitHub account

Received on Wednesday, 11 July 2018 05:18:11 UTC