Question

只是想把我的论文对话放在＆＃39;内容＆＃39;它不会出现在抽屉顶部的入门套件聚合物的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")

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

内容站在index.html上，其中包含我的自定义元素

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

更新

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

Answer 1

首先，您并非真的需要使用Polymer.Base.$$('body')来选择正文，您只需使用document.body。

其次，在您的组件上调用#content时，ready 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可能需要调用的原因。

抽屉顶部的聚合物fitInto纸张对话框显示

1 个答案: