Question

所以我刚刚将我的项目从Polymer v0.4.2更新到Polymer库的v0.5.1。似乎已经改变的一件事是如何实现 paper-dialog 元素。

在v0.4.2中，当我在自定义元素中有一个 paper-dialog 时，我可以使用 core-style 元素在我的元素中使用CSS自定义它

在v0.5.1中，如果我理解正确， paper-dialog 不再在我的组件中实现，而是在 core-overlay-layer 中实现元素位于我的组件的html页面外部。

那是否意味着我现在必须将CSS样式表添加到包含我的组件的html页面？如果是这样，那么我就不能再使用 core-style 以及 CoreStyle.g 对象的好处。这也意味着与我的组件相关的所有内容都不会长时间全部封装在我的组件中。

请告诉我，我错了，我仍然可以在我的组件内设置纸质对话框的样式。

谢谢！

Answer 1

在Polymer 0.5.1中，layered属性（doc：https://www.polymer-project.org/docs/elements/core-elements.html#core-overlay）默认为true，这使其始终显示页面内容。如果layered为false，则如果DOM中具有更高堆叠上下文的内容，则对话框可能不会显示在顶部。

然而，因为layered将对话框重新命名为全局core-overlay-layer，所以无法从外部范围设置样式。造型有两种选择：

如果您知道没有任何具有比对话框更高的堆叠上下文的DOM，请设置layered="false"以获取非分层行为，您可以从外部作用域设置样式。
使用全局样式的/deep/规则设置对话框的样式。您仍然可以通过引用全局范围中的样式来使用core-style。您也可以将其包含在与元素定义相同的文件中，例如

<core-style id="x-dialog">
  html /deep/ #dialog {
    color: red;
  }
</core-style>
<core-style ref="x-dialog"></core-style>
<polymer-element name="my-element" noscript>
<template>
  <paper-dialog id="dialog"></paper-dialog>
</template>
</polymer-element>

扩展paper-dialog并设置新元素的样式：

<polymer-element name="my-paper-dialog" extends="paper-dialog" noscript>
<template>
  <!-- or use core-style -->
  <style>
    :host {
      color: red;
    }
  </style>
</template>
</polymer-element>

实例：http://jsbin.com/subanakuna/1/edit?html,output

升级到Polymer 0.5.1和样式纸对话框时出现问题

1 个答案: