Style reflection in nested polymer based Custom Element from parent <div>

Question

I am currently evaluating Polymer as an option to use Custom Elements and so far I am impressed with the capabilities.My JavaScript coding skills are a bit lacking, so please do bear with me.

Is there any way a Custom Element could receive notifications or changes in the Div tag,style or CSS in which the Custom Element is embedded. In other words, is there a specific way I could know of changes of the parent node in which objects are embedded, like the example below using simple JavaScript like :

document.querySelector('#test').style[['top','left','right','width','height','bottom']    [Math.floor(Math.random()*5)]]=Math.floor(Math.random()*100);

I was hoping that the call above would allow changes to propagate through to all nest custom elements.

<div id="test" style="top: 400; left: 50; width: 200; height: 300;">
<x-foo></x-foo>
<x-foo></x-foo>
<x-foo></x-foo>
</div>

Any help appreciated. Thanks.

Answer 1

You're asking a few different, things but I think what you're after is styling the x-foo, children with the same styling as their parent element? For static styles it's easy peasy:

1. This is easily done in CSS:

    <style> #test > x-foo { top: 400 left: 50; width: 200; } </style> <div id="test" class="theme"> <x-foo></x-foo> ... </div> 

2. The x-foo element itself can define a :host-context() style rule that styles itself based on the context it's in:

    :host-context(.theme) { /* Styles applied if an ancestor has the class "theme" */ } 

For dynamically generated styles (that are not inheritable), you'd have to apply them to each element. This is really no different than what you'd need to do without using web components. You could also setup a MutationObserver on the parent node to detect changes to the style attribute.

Answer 2

Place px next to each value, or some other scale.

<div id="test" style="top: 400px; left: 50px; width: 200px; height: 300px;">

Here's a sure fire if complicated way to do it:

var test = document.querySelector('#test');
childrenInheritStyles(test);

function childrenInheritStyles(parent){
    var children = parent.children;
    var cstyles = parent.getAttribute('style');

    for(var i=0; i<children.length; i++){

        (function(c){

            cstyles.replace(/([^:]+):([^;]+);/g, function(m, g1, g2){

                c.style[g1.trim()] = g2.trim();
            });

        })(children[i]);
    }
}

That's if you're stuck on doing it programmatically.

Or you can use this:

var test = document.querySelector('#test');
childrenInheritStyles(test);

function childrenInheritStyles(parent){
    var children = parent.children;
    var cstyles = parent.getAttribute('style');

    for(var i=0; i<children.length; i++){

        children[i].style.cssText = cstyles;
    }
}

The second method will replace all the styles so it depends on what you want.

There isn't a way to do it naturally. If you want that kind of inheritence you'll have to program it or use a library.

As for seeing when the styles change you will be using ebidel's answer about MutationObservers for that, or you could just alter the above codes to both change, and propagate styles.

May I suggest reading up on the style property. About the Javascript style property