1

我正在使用 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 并尝试使用自定义样式，它似乎也不起作用。

我感谢您的帮助 ：）

4

1 回答 1

0

为了使用 Shadow DOM polyfill 应用 CSS 样式，首先您必须准备使用该函数<template>附加到 shadow root ，如ShadyCSS polyfill 页面中所述：ShadyCSS.prepareTemplate()

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>

于 2018-06-08T19:52:05.503 回答