[css-shadow-parts] theme too broad?

[daKmoR]

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:

<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

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

my-app::theme(my-alert.header) {
  background: green;
}

where
my-alert represents the (optional) tag name
header represents the part name

[daKmoR]

Even better solution would be to split part and theme attributes as described here
#1972

part names can be pretty generic... whereas theme names should be unique.

That would change the above example to

<my-app>
  #shadow-root
    <h3 part="header" theme="my-app-header">My App Header</h3>
    <my-dialog>
      #shadow-root
        <p part="header" theme="my-dialog-header">My Dialog Header</p>
        <my-alert>
          #shadow-root
            <span part="header" theme="my-alert-header">My Alert Header</span>
        </my-alert>
        <my-alert>
          #shadow-root
            <span part="header" theme="my-alert-header">My Alert Header</span>
        </my-alert>
    </my-dialog>
</my-app>

obviously

my-app::theme(my-alert-header) { 
  background: green; 
}

would work as expected :)

The best practice could be:

• use part with short names for more local changes (1-3 shadow levels down with forwarding)
• use theme with unique long names to provide global theming

[daKmoR]

#1972 was solved so that should be the approach to go