I have the following html
<tag>
#shadow-root
<slot name="avatar"></slot>
<span class="label"><spot></spot></slot>
Test
</tag>
How can I style the “label” element with css outside the tag component?
1
The Web Component Author decides which parts of shadowDOM can be styled with the part="thelabel" attribute
The Component User can then style shadowDOM content with the ::part(thelabel) selector
https://developer.mozilla.org/en-US/docs/Web/CSS/::part
Parts and Slots are unrelated other then being inside shadowDOM.
Also see my (very long) answer on :slotted
<my-element>
<!-- Web Component with Declarative ShadowRoot, without JavaScript -->
<template shadowrootmode="open">
<style>
.label {
border: 2px dashed red;
}
</style>
<slot name="avatar"></slot>
<span part="thelabel" class="label">A Label</span>
</template>
<span slot="avatar">Avatar goes here</span>
</my-element>
<style>
my-element::part(thelabel) {
border-color: green;
}
span {
background: pink;
}
</style>