Question

我正在使用Polymer 2来构建组件库，但我在Chrome以外的浏览器中遇到css变量问题。

我有一个包装器组件（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中这很好用，因为孩子们会从包装器中读取变量，但在其他浏览器中，即使我使用apply-shim polyfill并尝试使用自定义样式，它似乎也无法工作同样。

感谢您的帮助:)。

Answer 1

为了使用Shadow DOM polyfill可以应用CSS样式，首先你必须使用<template>函数准备你追加到阴影根的ShadyCSS.prepareTemplate()，正如ShadyCSS polyfill page：

中所述

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>

使css变量流向子组件

1 个答案: