Dart聚合物:用火狐中不正确显示的PaperDialog创建CoreAnimatedPages

Question

我使用含有PaperDialogs的Dart聚合物CoreAnimatedPages。其想法是有弹出窗口，在其中您可以通过多个选项视图单击。

示例存储库可用于：https://bitbucket.org/neogucky/polymer-dialog-problem/

DialogView: view.html

<link rel="import" href="packages/polymer/polymer.html">
<link rel="import" href="packages/paper_elements/paper_button.html">
<link rel="import" href="packages/paper_elements/paper_dialog.html">
<link rel="import" href="packages/paper_elements/paper_dialog_transition.html">
<link rel="import" href="packages/core_elements/core_animated_pages.html">

<polymer-element name="test-view">
  <template>
    <paper-dialog id="extendedNode" vertical autoCloseDisabled=true transition="paper-transition-center" opened=true class="noTitle">
      <content> 
      <core-animated-pages selected="{{page}}" valueattr="id" transitions="hero-transition cross-fade">
            <section id="0">
                <br><br>
                <p cross-fade>Click next to see the secret text.</p>
            </section>
            <section id="1">
                <br><br>
                <p cross-fade >This text is a secret, so don't tell Firefox users!</p>
          </section>
        </core-animated-pages>
    </content>
    </paper-dialog>
  </template>

<script type="application/dart" src="view.dart"></script>
</polymer-element>

CSS-file:

html /deep/ paper-dialog {
  margin-top: -150px;
  margin-left: -300px;
}

html /deep/ paper-dialog /deep/ core-animated-pages{
  height: 300px;
  width: 600px;
}

预期的行为:在页面加载时，将弹出一个300 pxx600px对话框，左下角有一个按钮。

火狐中的行为: css文件中没有设置大小时，将显示一个小对话框，类似于chrome中的对话框。

我想确认这是否是我的错，因为我使用了不正确的CSS挂钩，或者这似乎是一个聚合物问题火狐。

Answer 1

如果CSS不在高分子元素中，则需要添加选择器的多填充版本，以使其在没有本机阴影-DOM支持的浏览器上工作。

html paper-dialog,
html /deep/ paper-dialog {
  margin-top: -150px;
  margin-left: -300px;
}

html paper-dialog core-animated-pages,
html /deep/ paper-dialog /deep/ core-animated-pages{
  height: 300px;
  width: 600px;
}

有关详细信息，请参阅https://www.polymer-project.org/0.5/docs/polymer/styling.html和https://www.polymer-project.org/0.5/articles/styling-elements.html