Changing CSS Variables via Js in Polymer

Polymer way of changing css using js

I got it, can be achieved by doing something like this.

<div style$="margin:{{ x }}px;">

Using polymer css variables

I believe what you're looking for is this: (in your theme file)

<style is="custom-style">
  :root {
    --iron-overlay-backdrop-opacity: 0.7;
    --background-r: 0;
    --background-g: 0;
    --background-b: 255;
    --background-color: blue;
    --iron-overlay-backdrop-background-color: rgba(var(--background-r),var(--background-g),var(--background-b),var(--iron-overlay-backdrop-opacity));
  }
 </style>

and in your custom element

<style is="custom-style">
    :host paper-material.custom {
       background-color: var(--iron-overlay-backdrop-background-color);
    }
</style>

Update shared styles with JavaScript application wide in Polymer 2.0

The shared style is not a Polymer element, so it should not extend Polymer.Element and should not have a <script> tag. It should be defined like this:

shared-styles.html

<link rel="import" href="../bower_components/polymer/polymer-element.html">

<!-- shared styles for all views -->
<dom-module id="shared-styles">
  <template>
    <style>
      :host {
        --app-primary-color: #2196F3;
      }
    </style>
  </template>
</dom-module>

Then, call this.updateStyles in the root element (e.g., <my-app>) to apply a global style in Polymer 2.0. Note that all elements under <my-app> would inherit the newly specified styles.

Example

Here are instructions using Polymer CLI's polymer-2-starter-kit template:

1. Install the bleeding edge Polymer CLI (npm install polymer-cli@next), required for the polymer-2-starter-kit template.

2. Run:

   mkdir polymer-2-shared-styles-demo
   cd polymer-2-shared-styles-demo
   polymer init polymer-2-starter-kit
   

3. In src/my-app.html, add a <button> to the menu, which will change the value of --app-primary-color:

   <template>
     <app-drawer-layout fullbleed>
       <!-- Drawer content -->
       <app-drawer id="drawer" slot="drawer">
         <app-toolbar>Menu</app-toolbar>
   
         <!-- ****     LINE 77: Add button below      **** -->
         <button on-click="_changeAppColor">Change app color</button>
   
   <script>
     class MyApp extends Polymer.Element {
   
       /* ***    LINE 130: Define button-click handler below     **** */
       _changeAppColor() {
         this.updateStyles({'--app-primary-color': 'red'});
       }
   

4. In src/shared-styles.html, change .circle's background to use --app-primary-color:

   .circle {
   
     /* ***    LINE 33: Use --app-primary-color below     **** */
     background: var(--app-primary-color, #ddd);
   

5. Run polymer serve -o to open the starter kit in the default browser.

6. Click the button in the menu to change the color of the toolbar and the circles in each page. It should look like this:
   

GitHub project

CSS Variable trough Polymer (dynamically loaded) elements

I don't see any problem in your initial code. I copied your code and pasted it in plunker

<style>
    :host {
        display: block;
    }

    .waiting {
        --task-background-color: #e9d32c;
        --task-border-color: #b0a030;
    }

    .assigned {
        --task-background-color: #1b7eee;
        --task-border-color: #1357a4;
    }

    .started {
        --task-background-color: #EF6207;
        --task-border-color: #c05d1d;
    }

    .working {
        --task-background-color: #e99c2c;
        --task-border-color: #c48222;
    }

    .aborted {
        --task-background-color: #E34126;
        --task-border-color: #b72d15;
    }
    </style>

    <div class="items">
        <app-task id="task1" class="waiting"></app-task>
        <app-task id="task2" class="waiting"></app-task>
        <app-task id="task3" class="working"></app-task>
        <app-task id="task4" class="working"></app-task>
        <app-task id="task5" class="assigned"></app-task>
        <app-task id="task6" class="aborted"></app-task>
    </div>

and it seemed to be working fine for me.

As for your new problem replace your javascript method with this method and it should work.

{
  let statuses = ['waiting','assigned','started','working','aborted'];
   for(var i = 1; i<=30; i++)
    {
     let itemStatus = statuses[Math.floor(Math.random()*statuses.length)];

     let itemElement = document.createElement('APP-TASK');
     itemElement.id = 'task'+i;
     itemElement.classList.add(itemStatus);

     console.debug( itemElement );

     Polymer.dom(this.$.items).appendChild(itemElement);

    }
    Polymer.dom.flush();
   }

Also, here is the change that i made in your app-task-grid element

<div class="items" id="items"> //added id attribute to the div tag

The problem being the way you are adding child elements they do not get properly inserted into dom tree of the element. Polymer has documentation on how to work with tree of its elements. You can read more about it here

Polymer change custom-style variable at runtime

You can do this manually

 this.customStyle['--my-toolbar-color'] = 'blue';
    this.updateStyles();

see the documentation part

Getting Css Variable Value at Runtime

You should be able to read and write CSS variables using

this.customStyle['--my-toolbar-color']

or

this.customStyle['--my-toolbar-color'] = value;

if this is executed from within a Polymer element and the variables are declared in a style tag in this element.

There might be a way for global variables but I haven't discovered it yet.

---

Related Topics