使用照明元素与shadowDom内的内部组件进行交互的正确方式是什么

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,

我想我可以把它从外部传递到我的组件中，但它似乎也不起作用(我可以用自定义元素属性设置它一次，但从外部对它的更改似乎不起作用。

Answer 1

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

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