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

polymer could not style custom tag in repeat template

本文关键字：设置自定义标签样式聚合物更新时间：2023-09-26

试图在模板内设置纸张按钮的样式，我尝试了不同的扇区，但只有一个扇区有效，所以我如何才能正确地进行样式设置。因此，在index.html中，我调用iron-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>

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

你的CSS有几个问题：

import!应为important!
需要在选择器中定义Mixin和自定义属性：

错误的

<style>
  --paper-button: {
    /** Some styles */
  }
   --paper-button-ink-color: blue;
</style>

纠正

<style>
  :host {
    --paper-button: {
      /** Some styles */
    }
     --paper-button-ink-color: blue;
  }
</style>

Mixin和自定义属性不是选择器：

错误的

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

至少对于纸张按钮，如果您只想指定颜色和背景色，则不需要使用自定义属性/混合：

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