CSS Variable trough Polymer (dynamically loaded) elements

Question

I have multiple custom elements in my projects and I have a problem with css variables. In my parent element I have multiple item element with status classes. I want to manipulate the background and border color using that status classes, but I want to define the values in my parent element but somehow it not want to work.

Here my parent element:

My children element:

I tried already:

:host .waiting { ... }
:host app-task.waiting { ... }
app-task.waiting { ... }
:root .waiting { ... }
:root app-task.waiting { ... }
:root { .waiting { ... } }
:root { app-task.waiting { ... } }
parent element for the app-task for the classes
style is="custom-style" inside the app-grid template
style is="custom-style" outside the template but inside the app-grid element html file

but none of them seems working.

If I define the css variables in the :host then it's working, only not working with classes somehow. Where did made a mistake?

UPDATE#1:

Something weird hapening with the style-scope, if I add the "style-scope app-task-grid" to the parent element for the tasks:

then if I add a normal css rule like a color its applied in the app-task, but the css variables are not.

UPDATE#2:

As it was mention that this template is working, and I tested it and it is, !But id did not mention that the items are created on the fly and appended to the items. I added almost everything from my code on Plunker: http://plnkr.co/edit/b5XW1w3sEOy4UHc0rdWH?p=preview

Sorry about my mislead, I did not know that the problem source was the dynamic load.

Note: I updated the question with more example.

UPDATE#3:

Thanks to @a1626s and @GünterZöchbauer we found the answer:

My initial code was good and worked from the beginning, I defined the questions badly becasue I did not see what was the problem. So if somebody dynamically load elements inside an element must use Polymer.dom api.

Polymer.dom(this.querySelector('.items')).appendCild(itemElement);

a1626 · Accepted Answer

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

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

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

CSS Variable trough Polymer (dynamically loaded) elements

Answers (2)

Related Questions