Vaadin 10插槽在vaadin-对话中

Question

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

<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字段，但不会显示文本。这些行是否有错误？我使用vaadin-dialog的方式是错误的吗？

PS：

它使用此按钮工作：

<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层次结构中。

Answer 2

创建可重用对话框的一种方法是创建一个组件，如下所示

<dom-module id="show-sera-dialog">
    <template>
        <vaadin-dialog opened={{opened}}>
            <template>
                [[text]]
            </template>
        </vaadin-dialog>
    </template>
    <script>
        class ShowSeraDialog extends Polymer.Element {
            static get is() { return 'show-sera-dialog'; }
            static get properties() { 
                return  { 
                    "text" : String, 
                    "opened" : Boolean
                }
            }
        }

        window.customElements.define(ShowSeraDialog.is, ShowSeraDialog);
    </script>
</dom-module>

并像这样使用它

<link rel="import" href="../../bower_components/polymer/polymer-element.html">
<link rel="import" href="./show-sera-dialog.html">

<dom-module id="polymer-test-app">
  <template>
    <show-sera-dialog id="dialog1" text="It worked!"></show-sera-dialog>
    <button on-click="showDialog">Show dialog</button>
  </template>

  <script>
    class PolymerTestApp extends Polymer.Element {
      static get is() { return 'polymer-test-app'; }

      showDialog() {
        this.$.dialog1.opened = true;
      }
    }

    window.customElements.define(PolymerTestApp.is, PolymerTestApp);
  </script>
</dom-module>