Заставить переменные css отбирать у дочерних компонентов - PullRequest
Новая
       48

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

0 голосов
/ 08 июня 2018

Я использую 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 и пробовал также с пользовательскими стилями.

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

1 Ответ

0 голосов
/ 08 июня 2018

Чтобы CSS-стили могли применяться с полифилом DOM Shadow, сначала вы должны подготовить <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>
...