Polymer fitInto 纸质对话框显示在抽屉顶部答案

【问题标题】：Polymer fitInto paper-dialog show on top of drawerPolymer fitInto 纸质对话框显示在抽屉顶部
【发布时间】：2016-03-18 04:31:19
【问题描述】：

只想将我的纸质对话框放入未显示在抽屉顶部的入门套件聚合物的“内容”div 中。

<paper-dialog opened modal fit-into="{{content}}">MY DIALOG</paper-dialog>

我试试

ready: function() {
     this.content = Polymer.Base.$$('#content'); \\ null
}

和

Polymer.Base.$$('body').querySelector('#content')  \\ null
Polymer.Base.$$('body').getElementById('#content') \\ null
document.getElementById("#content")

我找不到从 shadow dom 外部检索 div 的方法。它总是返回 undefined 或 null。我只成功找回了尸体。

内容位于包含我的自定义元素的 index.html 上

<body> 
   ...
   <div id="content">

更新：

在 Kable 回答后，对话框很好地融入了我的内容 div，但模式的覆盖仍然覆盖了整个页面，位于抽屉的顶部。我想我可以通过在这里和那里放置一些 z-index 来解决这个问题，但我希望将叠加层限制为仅适合容器 div？

【问题讨论】：

标签： javascript dialog polymer

【解决方案1】：

首先，你不需要使用Polymer.Base.$$('body')来选择body，你可以使用document.body。

其次，当在您的组件上调用 ready 时，#content div 可能不可用。尝试在 attached 函数中访问它：

attached: function () {
    document.body.querySelector("#content");
}

如果这仍然不起作用，请尝试将其封装在 async 调用中：

attached: function () {
    this.async(function () {
        document.body.querySelector("#content");
    });
}

请参阅https://www.polymer-project.org/1.0/docs/devguide/registering-elements.html#initialization-timing-for-siblings，了解为什么可能需要调用async。

【讨论】：

attached：工作正常，我认为在“attached”之后调用了“ready”。现在对话框非常适合我的内容 div！无论如何，模态覆盖仍然填满整个页面，所以我更新了我的问题。谢谢卡布尔