diff --git a/google-chart.html b/google-chart.html
index b913050..b274adb 100644
--- a/google-chart.html
+++ b/google-chart.html
@@ -58,6 +58,7 @@
-->
+
@@ -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);
+ }
+ }
}
});
})();