html - vaadin-dialog 中的 Vaadin 10 插槽

Question

我想在 Vaadin 10 中创建一个可重用的对话框。因此我想到了使用 vaadin-dialog 中的标签。我创建了一个包含模板化 vaadin-dialog 的 html 文件。

<dom-module id="show-sera-dialog">
<template>
    <vaadin-dialog opened="opened">
        <sera-field></sera-field>
        <slot></slot>
    </vaadin-dialog>
<template>
</dom-module>

我试着像这样使用它。

<show-sera-dialog opened="{{showSera}}">
        It worked!
</show-sera-dialog>

将打开对话框并显示 sera-field，但永远不会显示文本。这些行有错误吗？我是否以错误的方式使用 vaadin-dialog？

附言:

它适用于这个按钮:

<dom-module id="one-shot-button">
<template>
    <vaadin-button on-click="_disable" theme="raised primary" disabled={{disabled}}>
        <slot></slot>
    </vaadin-button>
</template>

<script>
    class OneShotButton extends I18nMixin(Polymer.Element) {
        static get is() {
            return 'one-shot-button'
        }

        static get properties() {
            return {
                disabled: {type: Boolean, notify: true}
            }
        }

        _disable() {
            this.disabled = true;
            this.onClick();
        }
    }

    customElements.define(OneShotButton.is, OneShotButton);
</script>

Answer 1

您正在放置一个 <slot>在 <template> 里面.模板意味着 Web 组件将在渲染时做任何它需要的事情，例如通过创建多个实例，例如网格中的单元格等。在这种情况下 vaadin-dialog将内容传送到主体，以便它逃脱任何堆叠上下文。因此，它使插槽无法工作，因为它们不在同一 DOM 层次结构中。