在Polymer shadow DOM元素中切换主题

概述我们正在制作一个相当复杂的应用程序,它将具有不同的CSS文件集以应用于各种自定义元素.动态切换包含的样式表有什么好方法？ 从 <template> <link rel="stylesheet" href="../themes/dark.css"> <div id="container"></div></template> 至 <template> <link rel="stylesh 我们正在制作一个相当复杂的应用程序,它将具有不同的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>

解决方法 对于阴影根中的样式表的平台支持几乎不存在,因此polymer尝试使其看起来很容易.为了保持理智的性能,polymer在设置元素类型时将这些内容作为预处理.

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

你今天可以做的一件事是使用/ shadow /和/ shadow-deep / combinators(以前称为^和^^)来构建一个存在于主文档中的样式表,但仍然可以设置元素内部的样式.这样您就可以使用标准技术来控制样式表动态.

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

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

例如< link rel =“stylesheet”href =“sheet.CSS”shim-shadowdom>

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

总结

以上是内存溢出为你收集整理的在Polymer shadow DOM元素中切换主题全部内容，希望文章能够帮你解决在Polymer shadow DOM元素中切换主题所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。