polymer - 在 Polymer shadow DOM 元素中切换主题

我们正在制作一个相当复杂的应用程序，它将具有不同的 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>

最佳答案

对 shadow-root 内部样式表的平台支持几乎不存在，所以 Polymer 做了很多技巧来试图让它看起来简单。为了保持良好的性能，Polymer 在设置元素类型时将这些事情作为预处理。

结果是很难像这样在运行时加载或操作 shadow-root 内的样式表。

您今天可以做的一件事是使用 /shadow/ 和 /shadow-deep/ 组合器(以前称为 ^ 和 ^^)来构建一个位于主文档中但仍然可以设置元素内部样式的样式表。通过这种方式，您可以使用标准技术来控制样式表动态。

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

另请注意，如果您希望它们在不支持的浏览器上被 polyfill，您应该将属性 shim-shadowdom 放在任何样式或链接标签上，而不是在使用新组合器的 Polymer 模板中。

例如<link rel="stylesheet" href="sheet.css" shim-shadowdom>
见 http://www.polymer-project.org/docs/polymer/styling.html#sdcss

关于polymer - 在 Polymer shadow DOM 元素中切换主题，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/22231565/