javascript - 在 Polymer 中动态生成 SVG 样式

Question

我正在尝试将 Javascript 图表库 Chartist 包装在 Polymer 元素中。除了样式之外，一切都按预期进行。图表显示为无样式(就像每个图表示例在未加载 CSS 时所做的那样)。

我创建了一个样式模块，如 https://www.polymer-project.org/1.0/docs/devguide/styling.html#style-modules 中所述。 ，将其包含在我的元素中，并带有 link[rel=import] 和样式标记，并将 chartist.css 的所有内容复制/粘贴到样式模块中。不适用于 Firefox/Chrome。

为了证明样式模块已加载和处理，我添加了 ul#message 标记并使用指令对其进行样式设置。就像魅力一样。

我猜问题是图表专家创建了 SVG 图表。有谁知道如何处理 SVG 样式或者可以为我指明方向吗？

这是迄今为止我的代码:

样式模块:

<dom-module id="chartist-styles">
  <template>
    <style>
      :host { display: inline-block; }
      #messages { list-style-type: none; }  

      /* All the contents of chartist.css */

    </style>
  </template>
</dom-module>

polymer 元素:

<link rel="import" href="../../bower_components/polymer/polymer.html">
<!-- Includes chartist.js via script tag -->
<link rel="import" href="../chartist-import.html">

<link rel="import" href="../chartist-styles.html">
<dom-module id="test-charts-line">

    <template>

        <style include="chartist-styles"></style>
        <div id="chartist" class="ct-chart"></div>
        <ul id="messages"></ul>

    </template>

    <script>

    (function() {
        'use strict';

        Polymer({

            is: 'test-charts-line',

            properties: {

                chart: {
                    notify: true    
                },

                data: {
                    type: Object,
                    value: function(){
                        return {};
                    }
                },

                options: {
                    type: Object,
                    value: function(){
                        {}
                    }
                }
            },

            observers: [
                'updateChart(data.*, options.*)'
            ],

            updateChart: function(){

                this.chart = null;

                if(this.options == null){
                    this.chart = new Chartist.Line( '#chartist' , this.data );
                } else {
                    this.chart = new Chartist.Line( '#chartist' , this.data, this.options );    
                }

                let child = document.createElement('li');
                child.textContent = 'blub';
                Polymer.dom(this.$.messages).appendChild(child);

            },

            ready: function(){

                // Taken from a getting-started example on
                // https://gionkunz.github.io/chartist-js/examples.html
                this.data = {
                    // A labels array that can contain any sort of values
                    labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'],
                    // Our series array that contains series objects or
                    // in this case series data arrays
                    series: [
                        [5, 2, 4, 2, 0]
                    ]
                };

                this.options = {
                    width: 300,
                    height: 200
                };

            }
        });
    })();

    </script>
</dom-module>

Answer 1

在 Polymer docs 中找到了我的问题的解决方案:可以通过调用来应用动态创建的 DOM 节点的样式

ready: function() {
  this.scopeSubtree(this.$.container, true);
}

其中 this.$.container 引用模板中的 DOM 节点，在上面的示例中它将是 this.$.chartist。

Not for use on Polymer elements. If the subtree that you scope contains any Polymer elements with local DOM, scopeSubtree will cause the descendants' local DOM to be styled incorrectly.