聚合物無法在重復模板中設置自定義標簽的樣式

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. 需要在選擇器中定義Mixins和自定義屬性：

不正確

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

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

正確

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

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

3. Mixins和自定義屬性不是選擇器：

不正確

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

相反，您可以使用.special-css-class作為選擇器，並為任何匹配的元素定義mixin / custom屬性：

正確

<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. 至少對於紙質按鈕，如果只想指定顏色和背景色，則無需使用自定義屬性/混合：

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