javascript - 无法访问 Polymer Element 中的 "custom-style"资源

Question

我正在编写一个基本的 Polymer 组件，它也应该能够在更改属性时更改其样式。

当我尝试更改主题文件时，我使用 id 来检索它，但我总是得到 null。

这是我的代码:

[other polymer imports]
<link rel="import" href="/themes/my-theme.html" id="current_theme"/>

<dom-module id="my-app">
 <template>
  <style>
  :host{
    font-family: 'Roboto', 'Noto', sans-serif;
    -webkit-font-smoothing: antialiased;
  }

  :host ::content app-header{
    background: var(--app-primary-color);
    color: var(--app-text-color);
  }

  :host ::content user-app-toolbar{
    background: var(--app-primary-color);
    color: var(--app-text-color);
  }
  ...
</style>

...
<script>
Polymer({
  is: 'my-app',

  properties: {
    state: {
      type: String,
      reflectToAttribute: true,
      observer: '_stateChanged',
    },
   },
  _stateChanged: function(page) {
    // get theme file
    theme.href = '/theme/red.html';
   }
 });
 </script>
 </template>
</dom-module>

我的主题.html

<style is="custom-style">
  my-app {
   --app-primary-color: grey;
   --app-secondary-color: black;
   --app-text-color: white;
 }
</style>

问题是如何实现“获取主题文件”。我尝试了很多事情:

• document.querySelector('#current_theme'): [返回 null，我认为这是因为它使用了主文档而不是元素之一]
• Polymer(dom).querySelector('current_theme'): [undefined]
• this.$$["current_theme"] [undefined]

知道怎么做吗？

P.S: 以这种方式更改主题的想法来自这个 stack overflow question

Answer 1

Static

您需要在样式标签中放置您的主题 ID (Polymer 2.0)

<link rel="import" href="/themes/my-theme.html"/>

<dom-module id="my-app">
  <template>
    <style include="my-theme-xxx"></style>
    <style>
      :host{
      ...

我的主题.html

<dom-module id="my-theme-xxx"><template><style>
    my-app {
    --app-primary-color: grey;
    --app-secondary-color: black;
    --app-text-color: white;
    }
</style></template></dom-module>

Dynamic

但我发现只有这种方法可以通过主题动态更改元素 css。

<link rel="import" href="my-css.html">

<dom-module id="my-app">
  <template>
    <style include="my-css"></style>
    <button class="btn-primary-dark">Dark button</button>
    <button class="btn-primary-light">Light button</button>
    <button class="btn-primary-default">Default button</button>
    <br><br>
    <button on-click="setTheme1">Set theme 1</button>
    <button on-click="setTheme2">Set theme 2</button>
  </template>
  <script>
    class MyApp extends Polymer.Element {
      static get is() { return 'my-app'; }

      // Dynamicaly change vars
      setTheme1() {
        Polymer.updateStyles({
          '--dark-primary-color' : '#689F38',
          '--default-primary-color' : '#8BC34A',
          '--light-primary-color' : '#DCEDC8',
          '--text-primary-color' : '#212121'
        });
      }
      setTheme2() {
        Polymer.updateStyles({
          '--dark-primary-color' : '#1f8f37',
          '--default-primary-color' : '#818bbf',
          '--light-primary-color' : '#f0e82f',
          '--text-primary-color' : '#333333'
        });
      }

    }
    window.customElements.define(MyApp.is, MyApp);
  </script>
</dom-module>

我的-css.html

<dom-module id="my-css">
  <template>
    <style>
      .btn-primary-dark {
          background-color: var(--dark-primary-color);
          color: var(--secondary-text-color);
      }
      .btn-primary-light {
          background-color: var(--light-primary-color);
          color: var(--secondary-text-color);
      }
      .btn-primary-default {
          background-color: var(--default-primary-color);
          color: var(--secondary-text-color);
      }
    </style>
  </template>
</dom-module>