Question

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

当我尝试更改主题文件时，我使用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>

MY-theme.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

<强>静态

您需要使用主题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{
      ...

MY-theme.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>

<强>动态

然而我发现只有这样才能通过主题动态更改元素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>

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

Answer 2

深入研究Polymer I的文档我从这篇官方的Polymer doc page

中找到了这句话

注意：您应该只使用自定义样式来定义主文档的样式。要为元素的本地DOM定义样式，只需使用＆lt;风格＆gt; 阻止。

而且，从这个较旧的documentation

开始

通常，您希望在文档级别定义自定义属性值，以便为整个应用程序设置主题。由于自定义属性尚未构建到大多数浏览器中，因此您需要使用特殊的自定义样式标记来定义Polymer元素之外的自定义属性。尝试在index.html文件的标记中添加以下代码

将my-theme.html移动到index.html页面，我可以使用

从我的聚合物元素中检索它

document.querySelector('#current_theme')

除此之外，我无法动态更改主题。但由于问题的标题是关于访问资源，我解决了移动它的问题。正如craPkit所说，我不确定我想要做什么实际上是可能的。

无法访问Polymer Element中的“自定义样式”资源

2 个答案: