css specificity and css vars in polymer

Question

I'm using polymer and I'm thinking this is a but but I'm not entirely sure.

In my main document I have this:

<style is="custom-style">
      :root {
        --child-element-bg: #000;
        --child-element-mixin: {
              border: 10px solid #f30;
       };
     }
</style>

<parent-element>
     <child-element></child-element>
</parent-element>

The inside my child element I have this style block

<style>
    :host {
        background-color: var(--child-element-bg, --some-other-default);
        @apply(--child-element-mixin);
    }
</style>

Everything works great. However inside my parent-element I have:

 <style>
    :host {
        --child-element-bg: #f30;
        --child-element-mixin: {
              border: 5px solid #000;
       };
    }
</style> 

My child-element gets the 5px solid #000, But Not the #f30 background-color.

am I doing something wrong? Is this a known bug?

Answer 1

This is not a bug. This is how Polymer has implemented their css variables.