有很多关于如何设置Web组件样式的讨论.
例如,http: //www.html5rocks.com/en/tutorials/webcomponents/shadowdom-201/建议您可以使用:host标记来定位组件标记本身,而注入的样式表(例如h1)应该封装组件阴影dom内的h1.
这很棒,适用于chrome.
...但它只适用于铬.
在firefox中访问上面的url并没有显示任何花哨的演示; 事实上,他们完全没有工作.
所以.
https://github.com/polymer/platform理论上是一个polyfill,它允许您使用不具备所需功能的本机支持的浏览器的Web组件.
从理论上讲,这包括对CSS规则的一些有限支持,请参阅:http://www.polymer-project.org/platform/shadow-dom.html
但是,实际上它不起作用.完全没有.
这里发生了什么？当您无法设置组件样式时,我们如何认真地声称platform.js polyfill正在运行并支持旧版浏览器？
我见过的最好的解决方案是要求组件模板具有已知的根类节点:
<template>
<style>
.foo .bar {
...
}
</style>
<div class='foo'>
...
<div class='bar'>Hi</div>
</div>
</template>
<style>
.foo .bar {
...
}
</style>
请注意,样式表在模板和文档根上下文中都是重复的; 否则firefox,safari和IE样式不起作用.
这真的是我们在Web组件样式方面的水平吗？
我错过了什么吗？
这真的好像这是很多很多进一步被使用比人所提出的建议,即使使用最新的浏览器的每个版本的路程.
这是我用http://codepen.io/shadowmint/pen/iyFxE使用platform.js 0.3.4 的笔,并展示了它如何只在chrome中工作.