From 892aba13f7e2ca20067f0ddcd78ab697d7e68dbc Mon Sep 17 00:00:00 2001
From: Elliott Marquez <emarquez@google.com>
Date: Wed, 28 Nov 2018 12:51:58 -0800
Subject: [PATCH 1/2] clone stylesheets into root

---
 google-chart.html | 28 ++++++++++++++++++++++++++++
 1 file changed, 28 insertions(+)

diff --git a/google-chart.html b/google-chart.html
index b913050..60d660a 100644
--- a/google-chart.html
+++ b/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,33 @@
     _typeChanged: function() {
       this.$.loader.create(this.type, this.$.chartdiv)
           .then(function(chart) {
+
+            // get all gchart stylesheets
+            var stylesheets =
+                Polymer.dom(document.head)
+                    .querySelectorAll('link[rel="stylesheet"][type="text/css"]');
+            var gchartStylesheets = Array.from(stylesheets).filter(
+              function(element) {
+                return element.id.indexOf('load-css-') == 0;
+            });
+
+            // clone necessary attributes
+            var clonedSheets = gchartStylesheets.map(
+              function(stylesheet) {
+                var link = document.createElement('link');
+                link.setAttribute('rel', 'stylesheet');
+                link.setAttribute('type', 'text/css');
+                link.setAttribute('href', stylesheet.getAttribute('href'));
+                return link;
+              }
+            );
+
+            // append them to this local dom (for sdom support)
+            clonedSheets.forEach(
+              function(stylesheet) {
+                Polymer.dom(this.$.styles).appendChild(stylesheet);
+            }.bind(this));
+
             var loader = this.$.loader;
             Object.keys(this.events.concat(['select', 'ready'])
                 .reduce(function(set, eventName) {

From 84116c593a5f8a7edb8e4fb09aa4984d6734fe51 Mon Sep 17 00:00:00 2001
From: Elliott Marquez <emarquez@google.com>
Date: Wed, 28 Nov 2018 15:04:40 -0800
Subject: [PATCH 2/2] move style localization to function and two loops and
 only once

---
 google-chart.html | 56 ++++++++++++++++++++++++++---------------------
 1 file changed, 31 insertions(+), 25 deletions(-)

diff --git a/google-chart.html b/google-chart.html
index 60d660a..b274adb 100644
--- a/google-chart.html
+++ b/google-chart.html
@@ -312,31 +312,10 @@
       this.$.loader.create(this.type, this.$.chartdiv)
           .then(function(chart) {
 
-            // get all gchart stylesheets
-            var stylesheets =
-                Polymer.dom(document.head)
-                    .querySelectorAll('link[rel="stylesheet"][type="text/css"]');
-            var gchartStylesheets = Array.from(stylesheets).filter(
-              function(element) {
-                return element.id.indexOf('load-css-') == 0;
-            });
-
-            // clone necessary attributes
-            var clonedSheets = gchartStylesheets.map(
-              function(stylesheet) {
-                var link = document.createElement('link');
-                link.setAttribute('rel', 'stylesheet');
-                link.setAttribute('type', 'text/css');
-                link.setAttribute('href', stylesheet.getAttribute('href'));
-                return link;
-              }
-            );
-
-            // append them to this local dom (for sdom support)
-            clonedSheets.forEach(
-              function(stylesheet) {
-                Polymer.dom(this.$.styles).appendChild(stylesheet);
-            }.bind(this));
+            // 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'])
@@ -497,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);
+        }
+      }
     }
   });
 })();