css - polymer 自定义元素不会样式

Question

我有一个自定义的 Polymer 元素，它包含一个纸质对话框和一个纸质元素。

当对话框的分层属性设置为 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 的变体，以及模板内外的样式 block 。

你能看出我的设置有什么问题吗？

谢谢

Answer 1

好的，我明白了。 paper-dialog 将整个元素移动到核心叠加层中。所以只需将类定义移动到纸质对话框中，例如

<paper-dialog id="myDialog" layered="true">
 <style>
  .myClass {
    background:red;
  }
 </style>
 <paper-item class="myClass">
  Some Words
 </paper-item>
</paper-dialog>

这保证您的自定义样式也将被移动。