Styling dynamically generated SVG in Polymer

Question

I am trying to wrap the Javascript charting library Chartist in Polymer elements. Everything works as expected except the styling. The chart appears unstyled (just the way every chartist example does when no css is loaded).

I created a style module as explained in https://www.polymer-project.org/1.0/docs/devguide/styling.html#style-modules, included it in my element with both a link[rel=import] and style tag and copied/pasted all contents of chartist.css into the style-module. Does not work in Firefox/Chrome.

To prove the style module is loaded and processed at all, I included a ul#message tag and styled it with a directive. Works like a charm.

I guess the problem is that chartist creates SVG charts. Does anyone know how to treat styling SVG or can point me to a direction?

Here is my code so far:

Style module:

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

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

Stefan Reimers Stefan Reimers · Accepted Answer · 2016-03-14T17:23:15

Found the solution to my problem in the Polymer docs: styles for dynamically created DOM nodes can be applied by calling

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

where this.$.container references a DOM node in the template, in my above example it would be 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.

Styling dynamically generated SVG in Polymer

1 Answers