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

Question

所以我刚刚将我的项目从聚合物库的 Polymer v0.4.2 更新到 v0.5.1。 似乎发生了变化的一件事是纸质对话框元素的实现方式。

在

v0.4.2 中，当我的自定义元素内部有一个纸质对话框时，我可以使用核心样式元素在元素内部使用 CSS 对其进行自定义。

在 v0.5.1 中，如果我理解正确，纸质对话框不再在我的组件中实现，而是在我的组件外部的 html 页面中的核心覆盖层元素中实现。

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

请告诉我我错了，并且有一种方法可以让我从我的组件中设置纸质对话框的样式。

谢谢！

Answer 1

在聚合物 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因此无法从外部作用域设置其样式。样式有几个选项：

1. 如果您知道没有任何 DOM 的堆叠上下文高于对话框，请设置 layered="false" 以获取非分层行为，并且可以从外部范围设置其样式。

2. 使用全局样式中的/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>

3. 扩展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