如何将动态注入元素的Polymer @ imports / stylesheets作为范围？

Question

我正在为Prism.js（一种语法高亮显示器）开发一个Polymer元素。该元素已托管here，并且也位于GitHub repo中。我要做的是允许用户设置一个属性theme，它决定我们引入哪个主题文件。用户应该能够为每个元素设置不同的主题，并且这些样式的范围正确。

例如，如果您使用<prism-js theme="tomorrow">配置元素，则在元素初始化时，我们会读取theme值并通过prism-tomorrow.css注入@import来提取<prism-js theme="coy"> 。如果我有另一个实例scoped，则每个元素的主题不应该冲突。

不幸的是，尽管Canary的输出是正确的（每个元素的样式都没有碰撞）..

在Chrome稳定版中，样式没有作用域并互相破坏：

我想知道是否有可靠的方法来解决这个问题。

到目前为止，我试图：

• 使用shadowRoot属性注入我的样式 - 这不支持或不起作用
• 注入一个附加到我的shimStyling的样式表的链接 - 这有样式冲突的问题
• 使用 var sheet = document.querySelector('style').sheet; var hostRules = sheet.cssRules[0]; hostRules.cssText = '@import url("' + this.themepath + '");</style>'; - 同样的问题
• 根据Polymer docs：
处理模板的样式表

{{theme}}

或者，我想知道是否可以设置我的元素，以便我可以在模板的@import中更新 <style> :host { display: block; }; @import 'bower_components/prismjs/prism-{{theme}}.css'; </style> ，如下所示：

{{1}}

尽管如此，我不确定是否可以解决我的范围问题。不幸的是，列出所有主题都不是一种选择。有任何想法吗？ ：）

Answer 1

可悲的是，在ShadowDOM polyfill下实现每个实例的主题选择可能不太现实。

原生ShadowRoot可用的CSS范围非常难以填充。今天，polyfill做了很多技巧和翻译，以提供一些范围，同时仍然保持高效。

但是，有两类范围问题存在问题：

1. 每个实例范围（今天CSS shim按类型操作）
2. 下限封装（元素的样式可以泄漏到其子树中的其他元素中）

考虑到这些限制，仍然有很多东西可以正常工作，但是，特别是，像你想要的那样消费CSS并不是很好的支持。

正在开展工作，通过CSS Shim探索对（模拟的）每个实例范围的强制性支持。如果出现问题，我会尽力更新这个问题。