Заставить переменные css отбирать дочерние компоненты

Question

Я использую Polymer 2 для создания библиотеки компонентов, но у меня возникают проблемы с переменными css в браузерах, отличных от Chrome.

У меня есть компонент-оболочка (x-page), и у него есть свойство темы, которое может быть light или же dark, Мой CSS выглядит примерно так:

:host([light]) {
    ---color-1: rgb(200,200,200);
    ---color-2: rgb(210,210,210);
}
:host([dark]) {
    ---color-1: rgb(10,10,10);
    ---color-2: rgb(20,20,20);
}

Теперь я хочу использовать эти переменные во всех компонентах в этой оболочке (не только непосредственно в слотах, все они, включая их теневой корень).

В Chrome это работает нормально, так как дети будут читать переменные из оболочки, но в других браузерах это не работает, хотя я использую polyfill apply-shim и пробовал также с пользовательскими стилями.

Я ценю вашу помощь:)

Answer 1

Для того чтобы стили CSS могли применяться с полифилом Shadow DOM, сначала необходимо подготовить <template> вы добавляете к теневому корню ShadyCSS.prepareTemplate() функция, как объяснено на странице полизаполнения ShadyCSS:

ShadyCSS.prepareTemplate( template1, 'x-page' )

Пример:

ShadyCSS.prepareTemplate( template1, 'x-page' )
class XPage extends HTMLElement {
    constructor() {
        super()
        this.attachShadow( { mode: "open" } )
            .appendChild( template1.content.cloneNode( true ) )
    }
}
customElements.define( 'x-page', XPage )

<script src="https://rawgit.com/webcomponents/webcomponentsjs/master/webcomponents-bundle.js"></script>

<template id="template1">
    <style>
        :host([light]) {
            ---color-1: red;
            ---color-2: pink;
        }
        :host([dark]) {
            ---color-1: yellow;
            ---color-2: black;
        }
        span { 
            color: var(---color-1);
            background-color: var(---color-2);
        }
    </style>
    <span><slot></slot></span>
</template>

<x-page light>Light</x-page>
<x-page dark>Dark</x-page>