Question

我正在尝试在自定义组件中使用纸张对话框。

我希望能够从组件外部打开对话框。做这个的最好方式是什么？（所有示例都直接在组件上运行）

该对话框还要求我在其上调用“ open（）”将其打开。

在发现的示例中，我发现：

this.$.dialog.open();

但这似乎不适用于亮元素

我使用shadowRoot使它工作，不确定这是最佳选择：

render() {
        return html`
        <style>
        </style>
         <paper-dialog id="dialog">
         <h2>Content</h2>
       </paper-dialog>
      `;
      }

      firstUpdated(changedProperties) {
        console.log("firstUpdated called")
        if (this.shown == "true")
        {
           // this.$.dialog.open();
           this.shadowRoot.getElementById("dialog").open()
        }
      }

我在元素中添加了一个名为“显示”的属性

static get properties() {
    return {
      shown: Boolean,

认为我可以将其从外部传递到我的组件中，但是它似乎也不起作用（我可以使用自定义元素属性设置一次，但是从外面进行更改似乎不起作用。< / p>

Answer 1

通常，如果要在具有其他UI元素的元素中聚合对话框，则不应从元素外部显示/隐藏对话框-触发对话框的事件应由包含元素引发并处理

也就是说，如果绝对必要，那么我更喜欢“ showDialog”方法（不是属性）。关闭对话框应该由对话框按钮或失去焦点来触发，因此您无需公开close方法。

使用lit-element与shadowDom中的内部组件进行交互的正确方法是什么？

1 个答案: