:: VanillaJS模板和自定义元素的内容填充

时间:2014-06-30 19:31:17

标签: javascript html polymer web-component shadow-dom

似乎是聚合物

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属性也无济于事。

是否有任何解决方法,或者我使用它是错误的?

1 个答案:

答案 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