聚合物无法在重复模板中设置自定义标签样式

Question

尝试在模板内设置纸质按钮的样式，我尝试了不同的扇区，但只有一个有效，所以我怎样才能正确地进行样式设置。 所以在 index.html 中我调用 iron-ajax 元素，最后一个响应我调用 dom-repeat 模板

 <iron-ajax id="aj" auto
                url="url"
                handle-as="json"
                last-response="{{ajaxResponse}}"
                contentType="text/HTML"
                debounce-duration="300"></iron-ajax>
                <div   class="video">
                <template is="dom-repeat" items="[[ajaxResponse]]" >
                   <paper-card image="[[item.fields.image]]">
                      <feed-bdy items="[[item]]"></feed-bdy>

在 feed-bdy.html 中：

<link rel="import" href="../../bower_components/polymer/polymer.html">
 <link rel="import" href="../../bower_components/paper-styles/typography.html">
<dom-module is="feed-bdy">
     <style >  
     :host{
     --paper-button-ink-color: var(--paper-pink-a200);
  paper-button.custom:hover{ background-color: var(--paper-indigo-100)        !import; }   
  }
  :host paper-button.rea:hover{
  --paper-button-ink-color: var(--paper-pink-a200);
  color: red
  }
  --paper-button.custom:hover {
  background-color: var(--paper-indigo-100) !import;
  color: white !important;
  }
  paper-button:hover{
  background-color:red !important;
  }
</style>
<template id="repeater" is="dom-repeat" items="{{items}}">
  <div class="card-content">
     <div class="ar-header">
        <h3><a href="#">    [[items.fields.title]]</a></h3>
     </div>
     <div class="content-bdy"></div>
  </div>
  [[_renderHTML(items)]]
  <div class="card-actions">
     <paper-button  class="custom">إقراء المزيد !</paper-button>
     <paper-button>
        شارك 
        <iron-icon icon="reply"></iron-icon>
     </paper-button>
  </div>
</template>
<script>
  Polymer({
   is: 'feed-bdy',
   properties: {
       artId:{ 
        type : String,
        observer: '_renderHTML'

       }
     },
   listeners :{

   },
   _renderHTML: function(items) {
    // firstp to get only the first pargarph to put in the home page
    var ss= items.fields.body;
    //console.log(this.$$(".card-content"));
    var firstp = ss.substring(0,ss.search("</p>")+4);
    this.$$(".content-bdy").innerHTML += firstp;


   },
   _toggle : function(e){
    var id = Polymer.dom(e).localTarget.title;
    //console.log(id);
    var moreInfo = document.getElementById(id);
   //   console.log(moreInfo);
    var iconButton = Polymer.dom(e).localTarget;
         iconButton.icon = moreInfo.opened ? 'hardware:keyboard-arrow-up'
                                           : 'hardware:keyboard-arrow-down';
        moreInfo.toggle();
   }
  });
</script>
 </dom-module>

Answer 1

您的 CSS 存在一些问题：

1. import! 应该是 important!
2. 混合和自定义属性需要在选择器中定义：

不正确

<style>
  --paper-button: {
    /** Some styles */
  }

   --paper-button-ink-color: blue;
</style>

正确

<style>
  :host {
    --paper-button: {
      /** Some styles */
    }

     --paper-button-ink-color: blue;
  }
</style>

1. 混合和自定义属性不是选择器：

不正确

<style>
  --paper-button.special-css-class {
    /** Some styles */
  }
</style>

相反，您可以使用 .special-css-class 作为您的选择器，并为任何匹配的元素定义您的 mixin/自定义属性：

正确

<template>
  <style>
    .special-css-class {
      --paper-button: {
        /** Some styles */
      }

      --paper-button-ink-color: blue;
    }
  </style>

  <paper-button class="special-css-class"></paper-button>

  <!-- This button won't have your custom styles! -->
  <paper-button></paper-button>
</template>

4. 至少对于纸质按钮，如果您只想指定颜色和背景颜色，则无需使用自定义属性/mixins：

<base href="https://polygit.org/components/">
<script src="webcomponentsjs/webcomponents-lite.min.js"></script>
<link href="polymer/polymer.html" rel="import">
<link href="paper-button/paper-button.html" rel="import">

<x-foo></x-foo>

<dom-module id="x-foo">
  
  <template>
    <style>
      paper-button {
        background-color: purple;
        color: red;
      }
    </style>

    <template is="dom-repeat" items="{{items}}">
      <paper-button>Click Me</paper-button> 
    </template>
  </template>
  
  <script>
    Polymer({
      is: 'x-foo',
      properties: {
        items: {
          value: [1, 2, 3, 4]
        }
      }
    });
  </script>
</dom-module>