Style slotted Vaadin component in LitTemplate

Question

In Vaadin 24 I use a LitTemplate to create an own component. I defined a vaadin-button in the template and I can style it and its label with #headInfo and #headInfo::part(label).

import {LitElement, html, css} from 'lit';
import '@vaadin/button';
class PhonebookEntry extends LitElement {

    render() {
        return html`

            <div id="rootLayout">
                <div id="headline">
                    <span id="personImage"></span>
                    <vaadin-button id="headInfo"></vaadin-button>
                </div>

                <div id="detailInfo">
                    <slot></slot>
                </div>
            </div>
        `;
    }

    static get styles() {
        return css`
            #rootLayout {
                display: flex;
                flex-flow: column nowrap;
                margin: 2px 2px 10px 2px;
            }
          
            // Works!
            #headInfo {
                flex: 1;
                width: 100%;
                height: 55px;
            }

            // Works!
            #headInfo::part(label) {
                width: 100%;
                text-align: left;
                text-transform: none !important;
                font-size: medium;
                white-space: normal !important;
                overflow: hidden !important;
                word-break: break-all;
            }
          
            // Works!
            ::slotted(vaadin-button) {
                width: 100%;
                height: 55px;
            }

            // Does not work!
            ::slotted(vaadin-button)::part(label) {
                width: 100%;
                text-align: left;
                text-transform: none !important;
                padding-left: 20px;
                display: inline-flex;
                overflow: hidden;
                max-width: 100%;
                max-height: 100%;
                line-height: 15px !important;
            }
        `;
    }
}

customElements.define('phonebook-entry', PhonebookEntry);

Additional I have a slot, where I create several vaadin-buttons programmatically. I want to style these buttons in the LitTemplate. I can style the buttons with ::slotted(vaadin-button), but if I want to style the label of these buttons with ::slotted(vaadin-button)::part(label), this does not work! Do you know, why it is not working?

Answer 1

As of today, december 2023, it seems like ::slotted and ::part can't be used together.

Check:

https://github.com/w3c/csswg-drafts/issues/3896 ([css-shadow-parts][css-scoping] Allow ::part after ::slotted) - still open

and

https://github.com/w3c/csswg-drafts/issues/5161 ([css-shadow-parts] Can I use ::slotted and ::part together?) - closed as dupe of the issue above.

and

https://github.com/WICG/webcomponents/issues/934 (Clarification which pseudo selectors work with ::slotted and ::part) - still open and has a comment saying that "but I can say that, unfortunately, ::slotted and ::part do not work together. In other words, it's not currently possible to target a slotted custom element's part".

If you want to style the vaadin-button::part(label), you'll need to add the style in the global stylesheet, since slots are in the light dom. For example, you could do:

phonebook-entry vaadin-button::part(label){
    color: orange;
}