css - 升级到 Polymer 0.5.1 和样式纸对话的问题

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 页面 外部 中的元素。

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

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

谢谢!

Answer 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，所以不可能从外部范围设置它的样式。有几个样式选项:

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>

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