0

看来聚合物的

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

有什么解决方法，还是我用错了？

4

1 回答 1

3

匀场样式是 polymer.js（加糖）自动为您做的事情。它内联样式表 -><style>在元素中，填充这些样式，并将它们添加到 polyfill 下的文档头部。

如果您使用的是原版的东西，则必须手动进行匀场并手动添加。如果您shim-shadowdom在 a 或样式表中包含该属性<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。

于 2014-06-30T19:34:53.703 回答