如何为Polymer应用实现动态主题切换？解决样式加载冲突

我完全懂你现在的困扰——本来想通过不同的App子类配合dom-if来实现主题切换，结果不管当前渲染哪个元素，所有主题的全局样式都会自动加载生效，连懒加载的方式都因为赶不上CSS解析时机而失效。别着急，我给你几个适配Polymer特性的解决方案，一步步帮你搞定这个问题：

方案一：用动态CSS变量替代多App子类（最推荐） #

Polymer的核心设计之一就是支持CSS变量的动态切换，完全不需要创建多个App子类来实现主题变化。你可以把主题变量抽离出来，通过监听theme属性的变化，动态把变量注入到全局根元素上：

1. 先定义好各个主题的变量集合（可以写在Wrapper元素的属性里，或者单独的JSON文件）：

// my-app-wrapper.js
static get properties() {
  return {
    theme: {
      type: String,
      value: 'light',
      observer: '_themeChanged'
    },
    // 定义所有主题的变量配置
    _themeConfigs: {
      type: Object,
      value: () => ({
        dark: {
          '--app-primary-color': '#990AE3',
          '--app-secondary-color': 'var(--paper-deep-orange-500)'
        },
        light: {
          '--app-primary-color': '#1976d2',
          '--app-secondary-color': '#dc004e'
        }
      })
    }
  };
}

2. 实现主题切换的监听方法，动态更新全局CSS变量：

_themeChanged(newTheme) {
  const root = document.documentElement;
  const targetTheme = this._themeConfigs[newTheme] || this._themeConfigs.light;

  // 先清除之前的主题变量，避免样式残留
  Object.keys(this._themeConfigs.light).forEach(key => {
    root.style.removeProperty(key);
  });

  // 应用新主题的变量
  Object.keys(targetTheme).forEach(key => {
    root.style.setProperty(key, targetTheme[key]);
  });
}

3. 最后在Wrapper的模板里，只需要渲染一个my-app即可，所有主题变化通过CSS变量自动生效：

<!-- my-app-wrapper.html -->
<my-app></my-app>

这种方式完全避免了多子类的冗余，也不会加载多余的全局样式，是Polymer官方推荐的主题实现方式。

方案二：用Scoped CSS隔离主题样式（保留多子类场景） #

如果一定要保留my-app-dark这类子类的设计，那你需要把主题样式从全局<custom-style>移到子类的Scoped CSS中，确保只有当子类被渲染时，样式才会生效：

1. 重构my-app-dark，把主题变量作用在自身内部，并传递给子元素：

<!-- my-app-dark.html -->
<link rel="import" href="../my-app/my-app.html">
<dom-module id="my-app-dark">
  <template>
    <style>
      :host {
        /* 定义主题变量 */
        --app-primary-color: #990AE3;
        --app-secondary-color: var(--paper-deep-orange-500);
        /* 把变量传递给内部的my-app */
        --my-app-primary: var(--app-primary-color);
        --my-app-secondary: var(--app-secondary-color);
      }
    </style>
    <!-- 把变量通过属性传递给my-app -->
    <my-app 
      primary-color="[[var(--my-app-primary)]]"
      secondary-color="[[var(--my-app-secondary)]]"
    ></my-app>
  </template>
  <script>
    class MyAppDark extends Polymer.Element {
      static get is() { return 'my-app-dark'; }
    }
    customElements.define(MyAppDark.is, MyAppDark);
  </script>
</dom-module>

2. 修改my-app，让它支持通过属性接收主题变量：

<!-- my-app.html -->
<dom-module id="my-app">
  <template>
    <style>
      :host {
        --app-primary-color: {{primaryColor}};
        --app-secondary-color: {{secondaryColor}};
        /* 其他原有样式 */
      }
    </style>
    <!-- 内部内容 -->
  </template>
  <script>
    class MyApp extends Polymer.Element {
      static get is() { return 'my-app'; }
      static get properties() {
        return {
          primaryColor: {
            type: String,
            value: '#1976d2' // 默认浅色主题
          },
          secondaryColor: {
            type: String,
            value: '#dc004e'
          }
        };
      }
    }
    customElements.define(MyApp.is, MyApp);
  </script>
</dom-module>

这样只有当my-app-dark被dom-if渲染时，它的Scoped样式才会生效，不会污染全局或者其他未渲染的元素。

方案三：动态加载主题样式并处理解析时机 #

如果坚持要用懒加载的方式，你可以通过动态插入<link>标签加载主题CSS，并确保样式加载完成后再渲染对应App元素：

// my-app-wrapper.js
static get properties() {
  return {
    theme: {
      type: String,
      value: 'light',
      observer: '_themeChanged'
    },
    _loadedThemes: {
      type: Array,
      value: () => []
    },
    _renderReady: {
      type: Boolean,
      value: false
    }
  };
}

_themeChanged(newTheme) {
  // 默认主题或已加载过的主题，直接标记可渲染
  if (newTheme === 'light' || this._loadedThemes.includes(newTheme)) {
    this._renderReady = true;
    return;
  }

  // 动态加载主题样式文件
  const link = document.createElement('link');
  link.rel = 'stylesheet';
  link.href = `${newTheme}-theme.css`;
  link.onload = () => {
    this._loadedThemes.push(newTheme);
    this._renderReady = true;
  };
  document.head.appendChild(link);
}

模板中只在样式加载完成后渲染对应元素：

<!-- my-app-wrapper.html -->
<template is="dom-if" if="[[_equals(theme, 'dark') && _renderReady]]" restamp>
  <my-app></my-app>
</template>
<template is="dom-if" if="[[!_equals(theme, 'dark') && _renderReady]]" restamp>
  <my-app></my-app>
</template>

注意：这种方式加载的是全局CSS，切换回其他主题时需要移除对应的<link>标签，或者通过变量优先级覆盖旧样式。

内容的提问来源于stack exchange，提问作者mishu