Question

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

这

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

到

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

Answer 1

阴影根中的样式表的平台支持几乎不存在，因此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

Answer 2

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

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

在Polymer shadow DOM元素中切换主题

2 个答案: