::對於VanillaJS模板和自定義元素的內容填充工具

Question

看來，聚合物的

polyfill-next-selector { content: ':host #myId' } 

不爲VanillaJS <template> S和自定義元素的工作（在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屬性也於事無補。

是否有任何解決方法，或者我使用它錯了？

Answer 1

勻場方式是聚合物.js（糖）自動爲你做的。它內嵌樣式表 - ><style>放入元素中，填充這些樣式，然後將它們添加到polyfill下的文檔頭中。

如果您正在使用香草的東西，你必須做手工勻化和手動添加。如果您在<style>或樣式表中包含shim-shadowdom屬性，這應該確實可行，但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，因爲它不會在本地影子DOM存在，而且也沒有必要做額外的工作。

更多見http://www.polymer-project.org/docs/polymer/styling.html#manualshim。