Polymer encountered styling limitations when trying to apply custom styles to a repeated template tag

Question

Polymer encountered styling limitations when trying to apply custom styles to a repeated template tag

When attempting to style the paper-button inside the template, I have tested various approaches and only one has worked. How can I correctly apply styling? In my index.html file, I am calling the iron-ajax element and on the last-response, I'm invoking 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">Read More!</paper-button>
     <paper-button>
        Share 
        <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>

javascript polymer polymer-1.0

Answer 1

Answer №1

The CSS code you provided has a few errors:

import! must be corrected to important!
Mixins and custom properties should 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>

Mixins and custom properties are not meant to be used as 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>

If you simply want to specify the color and background for a paper button, custom properties/mixins may not be necessary:

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

Answer 2

The CSS code you provided has a few errors:

import! must be corrected to important!
Mixins and custom properties should 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>

Mixins and custom properties are not meant to be used as 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>

If you simply want to specify the color and background for a paper button, custom properties/mixins may not be necessary:

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

Polymer encountered styling limitations when trying to apply custom styles to a repeated template tag

Answer №1

Similar questions

Is there a way to have one element automatically expand when another is selected?

How can the background color of a DIV be altered based on the values of an array's minimum

Utilize Jquery and MVC 5 to create a reoccurring partial view

Getting the specific key of the selected item from material-ui autocomplete when onSelect is triggered, rather than simply retrieving the value

Adding a new column to a table that includes a span element within the td element

Dispatch a post request from the client to node.js

While the NPM package functions properly when used locally, it does not seem to work when installed from the

Steps for combining two collections into a single output in MongoDB with Node.js

Reorganize divisions using Bootstrap

Tips for utilizing Async/Await within an expressjs router

What is the purpose of creating a new HTTP instance for Socket.io when we already have an existing Express server in place?

Is it possible to selectively add Bootstrap classes to certain sections of a pre-existing website without changing the current styling in place?

Retrieving and storing selected checkbox values using both JavaScript and PHP

Troubleshooting node.js nodemailer sending email via Gmail

Implementing object rotation towards a target using three.js

What are the steps to retrieve all memcached information using node.js?

Is there a way for me to figure out if a Primefaces RadioCheckbox has been selected?

What could be causing the background image to not appear when hovered over?

Retrieve JSON data from a PHP script to be used in an Angular scope

Surprising glitch encountered while using UrlFetchApp.fetch in Google Apps Script