在Polymer shadow DOM元素中切换主题

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/组合器(以前的^和^^)来构建一个存在于主文档中的样式表,但仍然可以设置元素内部的样式.这样您就可以使用标准技术来控制样式表动态.

另请注意shim-shadowdom,如果要在非支持的浏览器上对这些属性进行填充,则应将该属性放在任何样式或链接标记上,而不是在使用新组合器的Polymer模板中.

例如 <link rel="stylesheet" href="sheet.css" shim-shadowdom>