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

Question

trying to style the paper-button inside the template, I've tried different sectors and only one is worked so how can i do the styling correctly. so in the index.html i call iron-ajax element and one the last-response i call a dom-repeat template

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

and in the 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

There are a few issues with your CSS:

1. import! should be important!
2. Mixins and custom properties need to be defined within a selector:

INCORRECT

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

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

CORRECT

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

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

3. Mixins and custom properties are not selectors:

INCORRECT

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

Instead, you can use the .special-css-class as your selector, and define your mixin/custom property for any element that matches:

CORRECT

<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. At least for paper-button, you need not use custom properties/mixins if you just want to specify the color and background color:

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