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 覆盖一旦打开，就会将内容传送到“真实”覆盖元素（显示的那个）——在任何 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>`;
    }
}