LitTemplate 中的样式开槽 Vaadin 组件

Question

在 Vaadin 24 中，我使用 LitTemplate 创建自己的组件。我在模板中定义了一个 vaadin 按钮，我可以使用 #headInfo 和 #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);

另外，我有一个插槽，我可以在其中以编程方式创建几个 vaadin 按钮。我想在 LitTemplate 中设置这些按钮的样式。我可以使用 ::slotted(vaadin-button) 设置按钮的样式，但是如果我想使用 ::slotted(vaadin-button)::part(label) 设置这些按钮的标签样式，这不起作用！你知道为什么它不起作用吗？

Answer 1

截至今天，2023 年 12 月，::slotted 和 ::part 似乎不能一起使用。

检查：

https://github.com/w3c/csswg-drafts/issues/3896（[css-shadow-parts][css-scoping]允许::slotted之后的::part）-仍然打开

和

https://github.com/w3c/csswg-drafts/issues/5161（[css-shadow-parts]我可以一起使用 ::slotted 和 ::part 吗？） - 作为上述问题的欺骗而关闭。

和

https://github.com/WICG/webcomponents/issues/934（澄清哪些伪选择器与 ::slotted 和 ::part 一起使用） - 仍然开放，并有一条评论说“但不幸的是，我可以这么说, ::slotted 和 ::part 不能一起工作。换句话说，目前无法定位带槽的自定义元素的部分”。