升级到 Polymer 0.5.1 和样式纸对话框的问题答案

【问题标题】：Issue with upgrade to Polymer 0.5.1 and styling paper-dialog升级到 Polymer 0.5.1 和样式纸对话框的问题
【发布时间】：2014-11-19 02:02:28
【问题描述】：

所以我刚刚将我的项目从 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 中实现在我的组件 outside 的 html 页面中的元素。

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

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

谢谢！

【问题讨论】：

标签： css polymer styling

【解决方案1】：

在 Polymer 0.5.1 中，layered 属性（文档：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

【讨论】：

伊冯娜，感谢您的回复！我想我会尝试用我自己的元素来扩展纸质对话。