Reload only one (switch between) file after page load

Question

I have to switch between several files (User theme choice) after page load (through select).

Unfortunately i can't figure out how to do it.

What i want to do is something like this:

betw: I use Polymer.js

Script:

 document.addEventListener('select-theme', function(e){
  // The event is fired from a nested component.

  console.log('select-theme: ', e.detail.themeValue)
  var theme = e.detail.themeValue;
  var importTag = document.getElementById('themeImport');
  var style = document.getElementById('style');
  var stylePath;
  var importPath;

  if(theme == "Green"){
     importPath = "../app-theme-green.html";
     stylePath ="app-theme-green";
  }else{
    importPath = "../app-theme-default.html";
    stylePath ="app-theme-default";
  }

  importTag.setAttribute('href', importPath);
  style.setAttribute('include', stylePath);
  //Load new file
});

HTML

<link id="themeImport" rel="import" href="../app-theme-green.html">

<template is="dom-bind" id="app">
    <style id="style" is="custom-style" include="app-theme-green"></style>
    // ... some content
</template>

Is this even possible?

Help would be greatly appreciated :-)

Answer 1

I followed this answers to get it work so I changed few parts of my code.

Instead of using html dom-modules i use now .ccs files.

document.addEventListener('select-theme', function(e){
  console.log('select-theme: ', e.detail.themeValue)
  var theme = e.detail.themeValue;
  var importPath;

  if(theme == "Green"){
     importPath = "../app-theme-green.css";
  }else{
     importPath = "../app-theme-default.css";
  }

  var head  = document.getElementsByTagName('head')[0];
      var link  = document.createElement('link');
      link.rel  = 'stylesheet';
      link.type = 'text/css';
      link.href = importPath;
      link.media = 'all';
      head.appendChild(link);
});