Cannot access "custom-style" resources in Polymer Element

Question

I am writing a basic Polymer Component that should be able also to change its style at the change of a property.

When I try to change the theme file, I use the id to retrieve it but I always get null.

Here is my code:

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

The problem is how to implement the "get theme file". I tried many things:

document.querySelector('#current_theme'): [returns null, I think it is because it uses the main document and not the one of the element]
Polymer(dom).querySelector('current_theme'): [undefined]
this.$$["current_theme"] [undefined]

Any idea of how to do this?

P.S: the idea of changing the theme in this way is taken from this stack overflow question

I also tried this.$.current_theme but it says undefined. I forgot to mention that my element is used inside an index.html file — Incio, Apr 05 '17 at 12:52
I'm not sure if what you're trying to do is possible, but at least check your include paths. The initial file resides under /themes/, whereas after the change you're trying to load from /theme/. — craPkit, Apr 05 '17 at 13:36
Good point. Unfortunally the "/themes/" path is right and the my-theme.html file is correctly loaded by the browser. "/theme/" is a typo but the point is that I never get to that line of code cause I check if(theme) [not written in the code above] and it always says null or undefined. — Incio, Apr 05 '17 at 13:53
When I access my component directly and not loading the index.html file, document.querySelector('#current_theme') works. So there must be something with the incapsulation — Incio, Apr 05 '17 at 13:53
Removing "custom-style" should allow me to retrieve the file? I tried but it doesn't work. If I used a custom element containing the style, as you suggest, would I be able to switch the theme? And if yes, how? — Incio, Apr 05 '17 at 14:32

Camille · Answer 1 · 2017-04-07T13:53:45.170

Static

You need to put a style tag with your theme 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>

Dynamic

Yet I found only this way to change element css by theme dynamicaly.

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

With this approach would it be possibile to dynamically load another file with other css rules? Changing the theme of the element? — Incio, Apr 06 '17 at 17:39
I add an example with dynamic 'theme', but i'm not really happy with it :-/ — Camille, Apr 07 '17 at 13:54
Since the problem mentioned in the question was not being able to access the style I am afraid we are going off topic, I would switch to this other [question](http://stackoverflow.com/questions/43273540/what-is-the-best-way-to-dynamically-change-the-style-of-an-application-built-wit) to find the best possible way to change theme dynamically. — Incio, Apr 07 '17 at 14:41
I add my answer to your new question, thanks for informing ;-) — Camille, Apr 10 '17 at 07:47

score 0 · Answer 2 · answered Apr 06 '17 at 17:38

Digging into documentation of Polymer I found this quote from this official Polymer doc page

Note: You should only use custom-style to define styles for the main document. To define styles for an element's local DOM, just use a < style> block.

And moreover, from this older documentation

Frequently you want to define custom property values at the document level, to set a theme for an entire application, for example. Because custom properties aren't built into most browsers yet, you need to use a special custom-style tag to define custom properties outside of a Polymer element. Try adding the following code inside the tag of your index.html file

Moving the my-theme.html into the index.html page, I am able to retrieve it from my polymer element using

document.querySelector('#current_theme')

Beside this, I am not able to change the theme dynamically. But since the title of the question was about accessing the resource, I solved the problem moving it. As craPkit said, I am not sure what I was trying to do is actually possible.

Cannot access "custom-style" resources in Polymer Element

2 Answers2