似乎是聚合物
polyfill-next-selector { content: ':host #myId' }
对于VanillaJS <template>
和自定义元素不起作用(在IE中)。
对于<polymer-element>
,它可以正常工作:http://codepen.io/robdodson/pen/FokEw/,但由于某些原因,当我尝试对原生JS执行相同操作时,它不会
<template>
<style>
polyfill-next-selector { content: ':host h1' }
::content h1 {
color: red;
}
</style>
..ShadowDOM stuff..
<content></content>
</template>
<my-element>
<h1>Hello World, I'm red content of Custom Element</h1>
</my-element>
http://codepen.io/tomalec/pen/apqgr
shim-shadowdom
属性也无济于事。
是否有任何解决方法,或者我使用它是错误的?
答案 0 :(得分:3)
匀场样式是polymer.js(含糖)自动为你做的事情。它内联样式表 - &gt;在元素中<style>
,填充这些样式,并将它们添加到polyfill下的文档头部。
如果你正在使用香草的东西,你必须手动进行匀场并手动添加。如果您在shim-shadowdom
或样式表中包含<style>
属性,那么这应该真正起作用,但在polymer.js和platform.js之间仍然存在一些重叠。
解决方案!...在createdCallback()
:
if (Platform.ShadowCSS) {
var style = template.querySelector('style');
var cssText = Platform.ShadowCSS.shimCssText(
style.textContent, 'my-element');
Platform.ShadowCSS.addCssToDocument(cssText);
}
演示:http://jsbin.com/xadocene/3/edit
请注意,我正在检查Platform.ShadowCSS
,因为它不存在于原生Shadow DOM下,并且不需要执行额外的工作。
有关详情,请参阅http://www.polymer-project.org/docs/polymer/styling.html#manualshim。