[csswg-drafts] [css-shadow-parts] theme too broad?

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

== [css-shadow-parts] theme too broad? ==
hey,

so in this draft
https://tabatkins.github.io/specs/css-shadow-parts/#selectordef-theme

`::theme` can be used to modify every part in the entire subtree. 

Description
------------

However, as part names do not need to be unique (at least I'm under that impression) this could result in various unwanted side effects.

UseCase:
I want to style every `my-alert` element. Unfortunately, the author picked a very common part name `header`. 

Example Code:
```html
<my-app>
  #shadow-root
    <h3 part="header">My App Header</h3>
    <my-dialog>
      #shadow-root
        <p part="header">My Dialog Header</p>
        <my-alert>
          #shadow-root
            <span part="header">My Alert Header</span>
        </my-alert>
        <my-alert>
          #shadow-root
            <span part="header">My Alert Header</span>
        </my-alert>
    </my-dialog>
</my-app>
```

So if I where to use 
```css
my-app::theme(header) { 
  background: green; 
}
```` 
that would affect (way too many parts): 
- `<h3 part="header">My App Header</h3>`
- `<p part="header">My Dialog Header</p>`
- `<span part="header">My Alert Header</span>`
- `<span part="header">My Alert Header</span>`

while I only would like to affect (every part="header" within `my-alert` elements):
- `<span part="header">My Alert Header</span>`
- `<span part="header">My Alert Header</span>`

Suggestion
------------

Could we add some way to limit it to certain tag-names (e.g. webcomponents with shadow-root)?
Something like this comes to mind
```css
my-app::theme(my-alert.header) {
  background: green;
}
```
where 
`my-alert` represents the (optional) tag name
`header` represents the part name




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

Received on Friday, 12 January 2018 10:40:55 UTC