Polymer 在聚合阴影DOM元素中切换主题

我们正在制作一个相当复杂的应用程序，将有不同的CSS文件集应用于各种自定义元素。动态切换包含的样式表的好方法是什么

从

到

---

我想到的最简单的方法是：

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

你好{{主题}
document.getElementById（“myTempl”）.model={
主题：“黑暗”/“光明”
};

对shadow roots内部样式表的平台支持几乎不存在，因此Polymer做了很多技巧来让它看起来简单。为了保持正常的性能，Polymer在设置元素类型时将这些作为预处理

结果是，在运行时很难像这样在阴影根中加载或操作样式表

现在可以做的一件事是使用

/shadow/

和

/shadow deep/

组合器（以前是^and^^）来构造一个样式表，该样式表存在于主文档中，但仍然可以对元素内部进行样式设置。通过这种方式，您可以使用标准技术来控制样式表动态

还请注意，如果希望在不支持的浏览器上对属性进行多边形填充，则应将属性

shim shadowdom

放在任何不在使用新组合符的聚合模板中的样式或链接标记上

e、 g.

---

请参见

抱歉@tomalec，这在今天不起作用<代码>不受ShadowDOM规范支持，因此Polymer正试图通过JavaScript为浏览器供应商指明方向。我们这样做的方式是使用一些不容易概括（例如，动态工作）而不破坏性能的技巧。很抱歉，正如您发布的那样，这只是一个模板，因此可以工作。它不能在聚合物元素内部工作，这是OP中暗示的用法。我不能让猫和帽子同时使用天然和聚填充。诀窍是什么？你必须更具体一些，可能会提供一个JSBin？带有

/shadow/

主文档中的样式表，它可以在Chrome Canary中工作，但不能在Chrome 33或Firefox中工作。如果没有，则相反。

/shadow/

是全新的，确切地说是在过去几天。确保将Polymer更新至最新版本。适用于Chrome 35，但不适用于Chrome 33或Firefox：

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

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