LitElement：如何在 vaadin 覆盖层中填充插槽

Question

我正在按照 this tutorial 创建我的组件。在我的用例中，我需要将 Java 元素添加到 vaadin-overlay 内的插槽中。

<vaadin-overlay id="myOverlay">
    <slot name="myslot"></slot>
</vaadin-overlay>

我猜是有某种计时问题，因为当我尝试将组件添加到该插槽时它没有显示。

Component component = ...
component.getElement().setAttribute("slot", "myslot");
add(dropdownEndSlot);

或者在叠加层内不可能吗？

2021 年 8 月 31 日更新： the sampler中现在有代码示例供您测试和查看

2021 年 9 月 9 日更新： 我现在已经将整个组件完全重写为 litelement 并更新了 the sampler。据我所知，它正在运行，但是......还是有点慢。

Answer 1

Vaadin 覆盖一旦打开，就会将内容传送到 'real' 覆盖元素（显示的那个）——在任何 shadowRoot 之外创建。这似乎是一个常见的问题，事实证明无法在叠加层内使用插槽（https://github.com/vaadin/vaadin-dialog/issues/11 ).

至于“dropdownEndSlot”，例如对于 vcf-autosuggest 组件，它已被克服，如下所示：

<div id="dropdownEndSlot" part="dropdown-end-slot"></div>

然后在后台填写

    @Id(value = "dropdownEndSlot")
    private Element dropdownEndSlot;

    public void clearDropdownEndSlot() {
        dropdownEndSlot.removeAllChildren();
        dropdownEndSlot.getStyle().set("display", "none");
    }

    public void setComponentToDropdownEndSlot(Component component) {
        clearDropdownEndSlot();
        dropdownEndSlot.getStyle().set("display", "block");
        dropdownEndSlot.appendChild(component.getElement());
    }

虽然这不是一个完美的解决方案，但像这样的东西可能会做到：

@Route("")
public class TestView extends VerticalLayout {
    public TestView() {
        CustomComponent cc = new CustomComponent();

        Div testElement = new Div(new Span("IT WORKED !!!!"));
                testElement.setId("IT-WORKED");


        cc.addSlot001Content(testElement);
        cc.openOverlay();
        add(cc);

    }
}

@Tag("custom-component")
@JsModule("./custom-component.ts")
public class CustomComponent extends LitTemplate {
    @Id(value = "overlay")
    private Element overlay;

    @Id(value = "slot001")
    private Element slot;

    public void openOverlay() {
        overlay.setAttribute("opened", "true");
    }

    public void addSlot001Content(Component component) {
        slot.appendChild(component.getElement());
    }
}

import { LitElement, html, customElement } from 'lit-element';

@customElement('custom-component')
export class CustomComponent extends LitElement {
    render() {
        return html`
            <vaadin-overlay id="overlay">
                <div id="slot001"></div>
            </vaadin-overlay>`;
    }
}

LitElement：如何在 vaadin 覆盖层中填充插槽

LitElement: How to populate a slot inside a vaadin overlay

vaadin

lit-element

vaadin-flow

lit