在 Polymer 2.0 中使用 JavaScript 应用程序范围更新共享样式

Question

我有一个 shared-styles 元素可以保留我的大部分应用程序颜色。我可以轻松地在 shared-styles.html 中手动更改颜色，如果我使用 CSS 变量，我的所有其他组件都可以从那里继承。

我的问题是我需要更新 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">

Answer 1

共享样式不是 Polymer 元素，因此它不应扩展 Polymer.Element 且不应具有 <script> 标记。应该这样定义：

共享-styles.html

<link rel="import" href="../bower_components/polymer/polymer-element.html">

<!-- shared styles for all views -->
<dom-module id="shared-styles">
  <template>
    <style>
      :host {
        --app-primary-color: #2196F3;
      }
    </style>
  </template>
</dom-module>

然后，在根元素（例如，<my-app>）中调用 this.updateStyles 以在 Polymer 2.0 中应用全局样式。请注意，<my-app> 下的所有元素都将继承新指定的样式。

例子

以下是使用 Polymer CLI 的 polymer-2-starter-kit 模板的说明：

安装 polymer-2-starter-kit 模板所需的尖端 Polymer CLI (npm install polymer-cli@next)。

运行:

mkdir polymer-2-shared-styles-demo
cd polymer-2-shared-styles-demo
polymer init polymer-2-starter-kit

在src/my-app.html中，在菜单中添加一个<button>，会改变--app-primary-color的值：

<template>
  <app-drawer-layout fullbleed>
    <!-- Drawer content -->
    <app-drawer id="drawer" slot="drawer">
      <app-toolbar>Menu</app-toolbar>

      <!-- ****     LINE 77: Add button below      **** -->
      <button on-click="_changeAppColor">Change app color</button>

<script>
  class MyApp extends Polymer.Element {

    /* ***    LINE 130: Define button-click handler below     **** */
    _changeAppColor() {
      this.updateStyles({'--app-primary-color': 'red'});
    }

在 src/shared-styles.html 中，将 .circle 的 background 更改为使用 --app-primary-color:

.circle {

  /* ***    LINE 33: Use --app-primary-color below     **** */
  background: var(--app-primary-color, #ddd);

运行 polymer serve -o 在默认浏览器中打开初学者工具包。
单击菜单中的按钮可更改工具栏的颜色和每个页面中的圆圈。它应该是这样的：

GitHub project

在 Polymer 2.0 中使用 JavaScript 应用程序范围更新共享样式

Update shared styles with JavaScript application wide in Polymer 2.0

css

polymer

polymer-2.x

例子