我有一个 shared-styles
元素,它定义了我的应用程序的大部分颜色。如果我使用CSS变量,我可以轻松地在 shared-styles.html
中手动更改颜色,并让所有其他组件都从中继承。
我的问题是,我需要更新 shared-styles.html
中的 CSS 变量,并使所有继承 CSS 变量的其他组件相应地更新其颜色。下面是我的 shared-styles.html
。为了简洁起见,我删除了除 --app-primary-color
之外的所有变量。
<link rel="import" href="../bower_components/polymer/polymer-element.html">
<!-- shared styles for all views -->
<dom-module id="shared-styles">
<template>
<style is="custom-style">
:host {
--app-primary-color:#2196F3;
}
</style>
</template>
<script>
class SharedStyles extends Polymer.Element {
static get is() { return 'shared-styles'; }
ready(){
super.ready();
console.log('update css');
this.updateStyles({'--app-primary-color': 'red'});
}
}
window.customElements.define(SharedStyles.is, SharedStyles);
</script>
</dom-module>
这是我如何在其他组件中包含它们。例如:
<dom-module id="test-element">
<template>
<style include="shared-styles">