Styling CSS shadow parts not working when combine with exportparts

[kishok]

Describe the bug

i can't combine both part and exportparts in custom element. For styling outside the custom element we have to exportparts which can be customizable. For instance, ex sl-icon-button: If it only part attribute in sl-icon-button i able to style it.
But if i added along with exportparts of inner element parts. Only the exportedparts are working but the part of sl-icon-button itself are ignored

Demo

i have tried apply styling on part sl-tag::part(remove-button) which is not working along exportparts
https://codepen.io/kishokz92/pen/QWmjEqb

Screenshots

Browser / OS

• Mac OS
• Chrome
• v103

i want to better understand the what's the expected behaviour. Any help would be appreciated. Thanks 🙏

[claviska]

As a consumer, you don't need to worry about exportparts. If you take a look at the "CSS Parts" section of <sl-tag>, for example, you'll see a list of parts that you can target with ::part().

https://shoelace.style/components/tag?id=css-parts

In the case of remove-button, the host element <sl-icon-button> is exposed through ::part(remove-button) and if you want to target its base part, that's exposed through ::part(remove-button__base).

For example, if you add the following CSS to your example, you'll see this:

.tags-removable sl-tag::part(remove-button) {
  color: red
}

.tags-removable sl-tag::part(remove-button__base) {
  outline: dotted 1px blue;
}

Since icon buttons only expose a base part, you're able to target the host element and all exposed parts using the CSS above.

I hope that helps!

[kishok]

still the remove-button part can't be stylable by using the above method. please could u pls share me the working codepen if possible

thanks for detailed information. 🙏

[claviska]

If you're trying to turn the close icon red, try targeting the remove-button__base part. Aside from that, I can't tell what you're trying to customize.

.tags-removable sl-tag::part(remove-button__base) {
  color: red
}

[kishok]

sorry, i knew that we can style it via .tags-removable sl-tag::part(remove-button__base) { color: red }. Just curious to know why can't style it using part remove-button on sl-icon-button from outside the shadow DOM if exportparts also there. i tried to search about exportparts in mdn but there is no much detail about the usage.

<sl-tag>
  #shadow-root
    <sl-icon-button part="remove-button" exportparts="remove-button__base"></sl-icon-button>
</sl-tag>

Thanks
kishok

[claviska]

Yeah, there's not a lot of documentation for exportparts so I always have to dig into the spec. Here's a link that might help: https://www.w3.org/TR/css-shadow-parts-1/#exportparts-attr