Question

我确实有自己创建的几个嵌套聚合物元素。目前使用聚合物共享样式我能够将自定义样式注入其他元素。不幸的是，这种方法仅限于静态使用。因此，在实现时，我需要通过使用<link rel="import" href="my-shared-style.html">和<style include="my-shared-style"></style>导入共享样式模块来了解哪个元素应该使用哪种共享样式。

但在我的用例中，我确实需要在运行时将共享样式注入到聚合物元素中。有没有可能实现这个目标？

更新

我尝试了以下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;}')来动态添加样式时，样式模块被注入元素但不显示，因为聚合物似乎编辑自定义样式的文本内容，如下所示： / p>

<style is="custom-style" class="style-scope html-grid-row">
    div:not([style-scope]):not(.style-scope) {font-weight: bold;}
</style>

有没有办法阻止聚合物在样式规则中添加:not([style-scope]):not(.style-scope)前缀？

更新2：

使用include='my-shared-style'引用全局共享样式确实会产生相同的效果。

包含使用html import全局静态导入的共享样式：

<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>扩展document.register('scoped-style', {extends : 'style', prototype : ...}) HTML元素，在运行时动态地将样式注入到Polymer元素中。 injectStyle(style)方法（见上文）现在直接创建一个<style is="scoped-style">元素作为Elements根节点的子元素。的确，它的灵感来自于https://github.com/thomaspark/scoper。这对我来说到目前为止。

Answer 1

我成功使用了类似的东西动态注入样式

var myDomModule = document.createElement('style', 'custom-style');
myDomModule.setAttribute('include', 'mySharedStyleModuleName');
Polymer.dom(sliderElem.root).appendChild(myDomModule);

样式模块＆＃39; mySharedStyleModuleName＆＃39;需要在某处导入（例如index.html）。

另请参阅https://github.com/Polymer/polymer/issues/2681有关此方法遇到的问题以及https://stackoverflow.com/a/34650194/217408了解详情

在聚合物元素中动态注入共享样式（聚合物1.2.3）

1 个答案: