所以我刚刚将我的项目从 Polymer v0.4.2 更新到 Polymer 库 v0.5.1。似乎发生变化的一件事是纸质对话元素已实施。
在 v0.4.2 中，当我有一个纸质对话在我的自定义元素内部，我可以使用元素内部的 CSS 对其进行自定义核心式元素。
在 v0.5.1 中，如果我理解正确的话，纸质对话不再在我的组件内部实现，而是在核心覆盖层html 页面中的元素outside我的组件。
那么这是否意味着我现在必须向包含我的组件的 html 页面添加 CSS 样式表？如果是这样，那么我不能再使用核心式随着核心样式.g目的。这也意味着与我的组件相关的所有内容都不再all封装在我的组件内部。
请告诉我我错了，我仍然可以在组件内设置纸张对话框的样式。
Thanks!
在聚合物 0.5.1 中layered财产（文档：https://www.polymer-project.org/docs/elements/core-elements.html#core-overlay 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>
- Extend
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,输出 http://jsbin.com/subanakuna/1/edit?html,output
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
