css специфичность и css vars в полимере

Я использую полимер, и я думаю, что это но, но я не совсем уверен.

В моем основном документе у меня есть это:

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

Внутри моего дочернего элемента у меня есть этот блок стиля

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

Все отлично работает. Однако внутри моего родительского элемента у меня есть:

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

Мой дочерний элемент получает сплошной цвет # 000 размером 5 пикселей, но не цвет фона # f30.

Я делаю что-то неправильно? Это известная ошибка?