时间戳

首页 > 解决方案 > 使用 lit-element 与 shadowDom 中的内部组件交互的正确方法是什么？

polymer-3.x - 使用 lit-element 与 shadowDom 中的内部组件交互的正确方法是什么？

问题描述

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

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

该对话框还要求我在其上调用“open()”来打开它。

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

this.$.dialog.open();

但这似乎不适用于 lit-element

我使用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,

认为我可以将它从外部传递到我的组件中，但它似乎也没有解决问题（我可以使用自定义元素属性设置一次，但从外部对其进行更改似乎不起作用。

标签： polymer-3.xlit-elementpaper-dialog

解决方案

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

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

推荐阅读