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

【问题标题】：Update shared styles with JavaScript application wide in Polymer 2.0在 Polymer 2.0 中使用 JavaScript 应用程序范围更新共享样式
【发布时间】：2017-04-01 06:42:55
【问题描述】：

我有一个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">

【问题讨论】：

标签： css polymer polymer-2.x

【解决方案1】：

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

shared-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

【讨论】：