我有几个嵌套的自定义Polymer元素。目前,通过使用Polymer共享样式,我能够将自定义样式注入到其他元素中。不幸的是,这种方法受到静态使用的限制。因此,在实现时,我需要知道哪个元素应该使用哪个共享样式,通过使用
但在我的用例中,我需要在运行时将共享样式注入到Polymer元素中。有没有可能实现这一点?
更新:
我尝试了以下方法,受Günters下面的答案启发:
有没有办法防止Polymer将
更新2:
使用
包含此静态全局导入的共享样式:
在动态导入并引用共享样式Polymer包含以下内容后:
<link rel="import" href="my-shared-style.html">
和<style include="my-shared-style"></style>
导入共享样式模块。但在我的用例中,我需要在运行时将共享样式注入到Polymer元素中。有没有可能实现这一点?
更新:
我尝试了以下方法,受Günters下面的答案启发:
Polymer({
is : 'html-grid-row',
/**
* Inject style into element
* @param {string} style
*/
injectStyle : function(style) {
var customStyle = document.createElement('style', 'custom-style');
customStyle.textContent = style;
Polymer.dom(this.root).appendChild(customStyle);
}
/**
* Additional Elements JS functionality is put here...
*
*/
)}
现在,当我尝试在运行时通过调用injectStyle('div {font-weight: bold;}')
来动态添加样式到元素实例时,样式模块会被注入到元素中,但由于Polymer似乎会编辑自定义样式的文本内容,因此它不会被显示出来,如下所示:
<style is="custom-style" class="style-scope html-grid-row">
div:not([style-scope]):not(.style-scope) {font-weight: bold;}
</style>
有没有办法防止Polymer将
:not([style-scope]):not(.style-scope)
前缀添加到样式规则中?更新2:
使用
include='my-shared-style'
引用全局共享样式具有相同的效果。包含此静态全局导入的共享样式:
<dom-module id="my-shared-style">
<template>
<style>
div {
font-weight: bold;
}
</style>
</template>
</dom-module>
在动态导入并引用共享样式Polymer包含以下内容后:
<style is="custom-style" include="my-shared-style" class="style-scope
html-grid-row">
div:not([style-scope]):not(.style-scope) {
font-weight: bold;
}
</style>
解决方案
最终,我采用了一种方法,在运行时通过扩展<style>
HTML元素来动态注入样式到Polymer元素中。具体方法是使用document.register('scoped-style', {extends : 'style', prototype : ...})
。现在,injectStyle(style)
方法(参见上文)直接创建一个<style is="scoped-style">
元素作为元素根节点的子元素。实际上,这个方法受到了https://github.com/thomaspark/scoper的启发。目前这种方法对我来说已经有效了。
textContent
,而是要使用custom-style
的include
属性。我自己不用 JS(只用 Dart),因此很难为我创建适当的 JS 翻译。 - Günter Zöchbauerstyle-scope [element name]
的 CSS 类。因此,Polymer 在我的动态添加的 CSS 样式中添加的:not([style-scope])
和:not(.style-scope)
伪类会导致这些样式不适用于该 Polymer 元素内部模板标签中包含的 HTML。 - phwa4563<content></content>
标签投影的元素吗?您可以尝试使用:host div {
作为选择器。 - Günter Zöchbauer