polymer could not style custom tag in repate tempate

[nawras albaghdadi]

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>