在聚合物元件（聚合物1.2.3）中动态注入共同样式 [英] Dynamically inject shared styles in polymer element (polymer 1.2.3)

问题描述

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

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

UPDATE

我试过下面的方法，受到Günters回答如下： p>

  Polymer（{
 is：'html-grid-row'，
 / ** 
 *注入样式到元素
 * @param {string} style 
 * / 
 injectStyle：function（style）{
 var customStyle = document.createElement（'style'，'custom -style'）; 
 customStyle.textContent = style; 
 Polymer.dom（this.root）.appendChild（customStyle）; 
} 
 / ** 
 *其他元素JS功能放在这里... 
 * 
 * / 
）} 
  

b $ b

当我现在尝试动态添加样式通过调用 injectStyle（'div {font-weight：bold;}'）模块注入到元素中但不显示，因为聚合物似乎编辑如下的自定义样式文本内容：

  style is =custom-styleclass =style-scope html-grid-row> 
 div：not（[style-scope]）：not（.style-scope）{font-weight：bold;} 
< / style& 
  

有没有办法防止聚合物添加：not

更新2： / p>

使用 include ='my-shared-style'引用全局共享风格具有相同的效果。 p>

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

  < dom-module id =my-shared-style> 
< template> 
< style> 
 div {
 font-weight：bold; 
} 
< / style> 
< / template> 
< / dom-module> 
 

动态导入和引用共享样式Polymer之后，包括以下内容：

 < style is =custom-styleinclude =my-shared-styleclass =style-scope 
 html-grid-row > 
 div：not（[style-scope]）：not（.style-scope）{
 font-weight：bold; 
} 
< / style> 
  

解决方案

最后，我使用了一个解决方法，通过扩展< style> HTML元素与 document.register scoped-style'，{extends：'style'，prototype：...}）。 injectStyle（style）方法（见上文）现在创建一个< style is =scoped-style> 元素直接作为Elements根节点的子元素。实际上，它的灵感来自于 https://github.com/thomaspark/scoper 。

解决方案

我使用了这样成功的动态注入样式

  var myDomModule = document.createElement（'style'，'custom-style'）; 
 myDomModule.setAttribute（'include'，'mySharedStyleModuleName'）; 
 Polymer.dom（sliderElem.root）.appendChild（myDomModule）; 
  

需要在某处（如index.html）导入样式模块mySharedStyleModuleName p>

另请参阅 https://github.com/聚合物/聚合物/问题/ 2681 关于我使用此方法遇到的问题和 http://stackoverflow.com/a/ 34650194/217408 了解更多详情

I do have several nested polymer elements created by myself. Currently with using polymers shared styles I'm able to inject custom styling into other elements. Unfortunately this approach is restricted to static use. So at implementation time I do need to know which Element should use which shared style by import the shared style module with <link rel="import" href="my-shared-style.html"> and <style include="my-shared-style"></style>.

But in my use case I do need to inject shared styles into polymer elements at runtime. Is there any possibility to achieve this?

UPDATE

I tried following approach inspired by Günters answer below:

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...
    *
    */
)}

When I now try to dynamically add style by calling injectStyle('div {font-weight: bold;}') on elements instance at runtime the style module is injected into the element but is not displayed because polymer seems to edit custom-styles text content like the following:

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

Is there a way to prevent polymer from adding the :not([style-scope]):not(.style-scope) prefix to style rules?

UPDATE 2:

Referencing a global shared style using include='my-shared-style' does have the same effect.

Include this shared style which is statically imported globally using html import:

<dom-module id="my-shared-style">
    <template>
        <style>
            div {
                font-weight: bold;
            }
        </style>
    </template>
</dom-module>

After dynamically import and referencing shared-style Polymer includes following:

<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> 

SOLUTION

Finally I used a workaround for dynamically inject styling into Polymer elements at runtime by extending the <style> HTML Element with document.register('scoped-style', {extends : 'style', prototype : ...}). The injectStyle(style) method (see above) now creates a <style is="scoped-style"> element directly as child of the Elements root node. Indeed it's inspired by https://github.com/thomaspark/scoper. This works so far for me.

解决方案

I used something like this successfully to inject styles dynamically

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

The style-module 'mySharedStyleModuleName' needs to be imported somewhere (like index.html).

See also https://github.com/Polymer/polymer/issues/2681 about issues I run into with this approach and http://stackoverflow.com/a/34650194/217408 for more details

这篇关于在聚合物元件（聚合物1.2.3）中动态注入共同样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！