我有一个自定义的 Polymer 元素,它包含一个纸对话框和一个纸项。
当对话框的 layered 属性设置为 true 时,我无法设置纸张元素的样式。
<polymer-element name="myElement">
<template>
<style>
paper-item.myClass {
background: #B7AAFA;
}
html /deep/ paper-item.myClass {
background: #B7AAFA;
}
</style>
<paper-dialog id="myDialog" layered="true">
<paper-item class="myClass">
Some Words
</paper-item>
</paper-dialog>
</template>
<script>
Polymer(
...
);
</script>
</polymer-element>
我曾尝试仅通过 ID 引用它,使用/deep/和::shadow 的变体,以及模板内外的样式块。
你能看出我的设置有什么问题吗?
谢谢
最佳答案
好的,我看到问题了。 paper-dialog 将整个元素移动到核心覆盖层中。所以只需将类定义移动到纸张对话框中,例如
<paper-dialog id="myDialog" layered="true">
<style>
.myClass {
background:red;
}
</style>
<paper-item class="myClass">
Some Words
</paper-item>
</paper-dialog>
这保证了您的自定义样式也将被移动。
关于css - polymer 自定义元素不会样式,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/29009554/