how to style the light dom of each instance of a polymer custom element independently using javascript

Question

I will like to style the light dom's css using javascript from within the custom element's definition. Is it possible?

The premise is that I have a widget created using polymer, the content within the widget is declared in the light DOM. I like to be able to hide widget and the logic is scripted into the custom element itself.

Answer 1

Using this.children , we can access the elements within the light DOM of the instance of the custom element. It returns the elements as an array.

In my case, I wish to set the visibility of the elements within the light DOM to hidden when the widget is being minimized.

A for loop is used to set the visibility of all the elements within the light DOM

for(var i = 0;i<this.children.length;i++)
{
    $(this.children[i]).css("visibility",'hidden');
}