聚合物自定义元素不会样式

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 的变体，以及模板内外的样式块。

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

谢谢

Answer 1

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

<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 custom element will not style

css

polymer