Переключение тем в элементе Polymer shadow DOM

Платформенная поддержка таблиц стилей внутри теневых корней практически не существует, поэтому Polymer применяет множество трюков, чтобы сделать его простым. Чтобы поддерживать нормальную производительность, Polymer делает это в качестве предварительной обработки при настройке типа элемента.

В результате трудно загружать или манипулировать таблицей стилей внутри теневого корня во время выполнения, как это.

Одна вещь, которую вы можете сделать сегодня, — это использовать комбинаторы /shadow/ и /shadow-deep/ (ранее ^ и ^^) для создания таблицы стилей, которая живет в основном документе, но может по-прежнему стилизовать внутренности элементов. Таким образом, вы можете использовать стандартные методы для управления динамикой вашей таблицы стилей.

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

Также обратите внимание, что вы должны поместить атрибут shim-shadowdom в любой стиль или тег ссылки не в шаблоне Polymer, который использует новые комбинаторы, если вы хотите, чтобы они были полифиллированы в неподдерживающих браузерах.

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

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

Самый простой способ, который приходит мне на ум, это:

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