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>`;
}
}