Merge pull request #223 from GoogleWebComponents/shadow-dom-support

clone global stylesheet elements into root for shadowdom support

Author: Elliott Marquez

google-chart.html

@@ -58,6 +58,7 @@
 -->
 <dom-module id="google-chart">
   <template>
+    <div id="styles"></div>
     <style include="google-chart-styles"></style>
     <google-chart-loader id="loader" type="[[type]]"></google-chart-loader>
     <div id="chartdiv"></div>
@@ -310,6 +311,12 @@
     _typeChanged: function() {
       this.$.loader.create(this.type, this.$.chartdiv)
           .then(function(chart) {
+
+            // only add link stylesheet elements if there are none already
+            if (!this.$.styles.children.length) {
+              this._localizeGlobalStylesheets();
+            }
+
             var loader = this.$.loader;
             Object.keys(this.events.concat(['select', 'ready'])
                 .reduce(function(set, eventName) {
@@ -469,6 +476,33 @@
         .then(function(dataView) {
           this._dataView = dataView;
         }.bind(this));
+    },
+
+    /**
+     * Queries global document head for google charts link#load-css-* and clones
+     * them into the local root's div#styles element for shadow dom support.
+     */
+    _localizeGlobalStylesheets: function() {
+      // get all gchart stylesheets
+      var stylesheets = Polymer.dom(document.head)
+          .querySelectorAll('link[rel="stylesheet"][type="text/css"]');
+
+      var stylesheetsArray = Array.from(stylesheets);
+
+      for (var i = 0; i < stylesheetsArray.length; i++) {
+        var sheetLinkEl = stylesheetsArray[i];
+        var isGchartStylesheet = sheetLinkEl.id.indexOf('load-css-') == 0;
+
+        if (isGchartStylesheet) {
+          // clone necessary stylesheet attributes
+          var clonedLinkEl = document.createElement('link');
+          clonedLinkEl.setAttribute('rel', 'stylesheet');
+          clonedLinkEl.setAttribute('type', 'text/css');
+          clonedLinkEl.setAttribute('href', sheetLinkEl.getAttribute('href'));
+
+          Polymer.dom(this.$.styles).appendChild(clonedLinkEl);
+        }
+      }
     }
   });
 })();