CODEWITHSUNDEEP
cssweb-component
maxshuty
maxshuty

Reputation: 10672

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?

Upvotes: 3

Views: 1503

Answers (1)

maxshuty
maxshuty

Reputation: 10672

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.

Upvotes: 6

Related Questions