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

Question

试图设计模板中的纸张按钮样式，我尝试了不同的扇区，只有一个工作，所以我如何正确地进行样式设计。 所以在我的index.html调用铁AJAX元件和一个最后的响应我所说的DOM重复模板

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

和在馈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. 混入和c ustom性质需要被选择器内定义：

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> 

混入和自定义属性不选择器：

INCORRECT

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

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

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> 

至少对于纸张按钮，如果您只是想指定颜色和背景颜色，则不需要使用自定义属性/ 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>