Search code examples
cssweb-component

Exporting multiple parts with CSS exportparts

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?

Solution

  • 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.