javascript - Polymer で動的に生成された SVG のスタイリング

Question

Javascript グラフ作成ライブラリ Chartist を Polymer 要素でラップしようとしています。スタイリングを除いて、すべてが期待どおりに機能します。チャートはスタイルが設定されていないように見えます (css がロードされていない場合のすべてのチャーティストの例と同じです)。

https://www.polymer-project.org/1.0/docs/devguide/styling.html#style-modulesで説明されているようにスタイル モジュールを作成し、リンク[rel=import] とスタイルの両方を使用して要素に含めました。タグを追加し、 chartist.cssのすべての内容をコピーして style-module に貼り付けました。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>

ポリマー要素:

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