Question

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

当对话框的layer属性设置为true时，我无法设置纸质项目的样式。

＆＃13;

<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>

＆＃13;

我尝试过使用ID引用它，使用/ deep /和:: shadow的变体，以及模板内外的样式块。

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

由于

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>

这可以保证您的自定义样式也会被移动。

Answer 2

这是一个关于如何解决这个问题的代码示例。 example

document.querySelector('a').addEventListener('click', function(e){
  e.preventDefault();
  var deepTest      = document.querySelector('deep-selector-test')
  	, dialogSetting = deepTest.getAttribute('layer') === 'false' ? 'true' : 'false';
  deepTest.setAttribute('layer', dialogSetting );
});

<script src="https://www.polymer-project.org/0.5/components/webcomponentsjs/webcomponents.min.js?20150311"></script>
<link rel="import" href="https://www.polymer-project.org/0.5/components/polymer/polymer.html">
<link type="import" href="https://www.polymer-project.org/0.5/components/paper-item/paper-item.html">
<link type="import" href="https://www.polymer-project.org/0.5/components/paper-dialog/paper-dialog.html">

<polymer-element name="deep-selector-test"
                 attributes="layer">
	  <template>
		    <style>
			      .myClass {
				        background: #B7AAFA;
      			}
			
			      paper-dialog[layered=true] .myClass {
				        background: red;
			      }
    		</style>
		    <paper-dialog id="myDialog" layered="true">
			      <paper-item class="myClass">Some Words</paper-item>
		    </paper-dialog>
	  </template>
	  <script>
		    Polymer('deep-selector-test', {
      layer: false,
      layerChanged: function(oldVal, newVal){
        this.shadowRoot.querySelector('paper-dialog').setAttribute('layered', newVal);
      }
    });
	  </script>
</polymer-element>

<h4>
  <a href="#">Change layered property</a>
</h4>
<deep-selector-test layer="false"></deep-selector-test>

Polymer自定义元素不会样式

2 个答案: