Switching themes in a Polymer shadow DOM element

Question

We're making a fairly complex app that will have different sets of CSS files to apply to various custom elements. What is a good way to dynamically switch an included stylesheet?

from

<template>
  <link rel="stylesheet" href="../themes/dark.css">
  <div id="container"></div>
</template>

to

<template>
  <link rel="stylesheet" href="../themes/light.css">
  <div id="container"></div>
</template>

Answer 1

Platform support for style sheets inside of shadow-roots barely exists, so Polymer does lots of tricks to try to make it look easy. To maintain sane performance, Polymer does these things as a preprocess when setting up an element type.

The upshot is that it's hard to load or manipulate a stylesheet inside a shadow-root at runtime like this.

One thing you can do today is use the /shadow/ and /shadow-deep/ combinators (formerly ^ and ^^) to construct a stylesheet that lives in the main document but can still style element innards. This way you can use standard techniques to control your stylesheet dynamics.

http://dev.w3.org/csswg/shadow-styling/#inheritance

Also note that you should put the attribute shim-shadowdom on any style or link tag not in an Polymer template that uses the new combinators, if you want them to be polyfilled on non-supporting browsers.

e.g. <link rel="stylesheet" href="sheet.css" shim-shadowdom>

See http://www.polymer-project.org/docs/polymer/styling.html#sdcss

Answer 2

The simplest way that comes to my mind is:

<template id="myTempl" bind>
  <link rel="stylesheet" href="../themes/{{theme}}.css">
  <div id="container">Hello {{theme}}</div>
</template>
<script type="text/javascript">
    document.getElementById("myTempl").model={
        theme: "dark" //"light"
    };
</script>