Exporting multiple parts with CSS exportparts

user_4826740 0
Viewed 117

I have a web component that is nested inside of other web components and I am working on a theming solution for my components. I need a way to export multiple parts but what I am trying to do does not work and styles are not applied when I try to export multiple parts.

Here is the structure:

<my-component>
  <other-component exportparts="theme-btn theme-dropdown"/>
</my-component>

Then in my CSS:

my-component::part(theme-btn) {
  background-color: tomato;
}

No style is applied. However, when I only export one part like this: exportparts="theme-btn" in the other-component it works and applies the styles. Where am I going wrong?

web-component css
1 Answers

The documentation on this is severely lacking.

You're very close. Instead of using a space to separate the different parts in exportparts you should use a comma ,.

Your new code would be:

<my-component>
  <other-component exportparts="theme-btn, theme-dropdown"/>
</my-component>

And now you can style both the theme-btn and the theme-dropdown parts.

user_48267400
Related