Inject ApexCharts CSS to shadow root if we're in a shadow DOM context, …

…fixes #238 Also added an Util.is() helper to perform type-checking that works across different window objects, and applied it on existing code using this method. The two unrelated changes in Utils.js (L7, L36-37 and L226-228) are to apply the current Prettier rules.
apexcharts · Nov 10, 2021 · 698b162 · 698b162
1 parent 70778bf
commit 698b162
Show file tree

Hide file tree

Showing 4 changed files with 38 additions and 11 deletions.
diff --git a/build/config.js b/build/config.js
@@ -66,6 +66,7 @@ function rollupConfig(opts) {
         preferConst: true
       }),
       postcss({
+        inject: false,
         plugins: []
       }),
       svgo({

diff --git a/src/apexcharts.js b/src/apexcharts.js
@@ -13,6 +13,7 @@ import YAxis from './modules/axes/YAxis'
 import InitCtxVariables from './modules/helpers/InitCtxVariables'
 import Destroy from './modules/helpers/Destroy'
 import { addResizeListener, removeResizeListener } from './utils/Resize'
+import apexCSS from './assets/apexcharts.css'
 
 /**
  *
@@ -72,6 +73,28 @@ export default class ApexCharts {
         window.addEventListener('resize', this.windowResizeHandler)
         addResizeListener(this.el.parentNode, this.parentResizeHandler)
 
+        // Add CSS if not already added
+        if (!this.css) {
+          let rootNode = this.el.getRootNode && this.el.getRootNode()
+          let inShadowRoot = Utils.is('ShadowRoot', rootNode)
+          let doc = this.el.ownerDocument
+          let globalCSS = doc.getElementById('apexcharts-css')
+
+          if (inShadowRoot || !globalCSS) {
+            this.css = document.createElement('style')
+            this.css.id = 'apexcharts-css'
+            this.css.textContent = apexCSS
+
+            if (inShadowRoot) {
+              // We are in Shadow DOM, add to shadow root
+              rootNode.prepend(this.css)
+            } else {
+              // Add to <head> of element's document
+              doc.head.appendChild(this.css)
+            }
+          }
+        }
+
         let graphData = this.create(this.w.config.series, {})
         if (!graphData) return resolve(this)
         this.mount(graphData)

diff --git a/src/modules/helpers/InitCtxVariables.js b/src/modules/helpers/InitCtxVariables.js
@@ -30,8 +30,6 @@ import 'svg.draggable.js'
 import 'svg.select.js'
 import 'svg.resize.js'
 
-import '../../assets/apexcharts.css'
-
 // global Apex object which user can use to override chart's defaults globally
 if (typeof window.Apex === 'undefined') {
   window.Apex = {}

diff --git a/src/utils/Utils.js b/src/utils/Utils.js
@@ -4,7 +4,7 @@
 
 class Utils {
   static bind(fn, me) {
-    return function() {
+    return function () {
       return fn.apply(me, arguments)
     }
   }
@@ -15,6 +15,11 @@ class Utils {
     )
   }
 
+  // Type checking that works across different window objects
+  static is(type, val) {
+    return Object.prototype.toString.call(val) === '[object ' + type + ']';
+  }
+
   static listToArray(list) {
     let i,
       array = []
@@ -28,8 +33,8 @@ class Utils {
   // credit: http://stackoverflow.com/questions/27936772/deep-object-merging-in-es6-es7#answer-34749873
   static extend(target, source) {
     if (typeof Object.assign !== 'function') {
-      ;(function() {
-        Object.assign = function(target) {
+      ; (function () {
+        Object.assign = function (target) {
           'use strict'
           // We must check against these specific cases.
           if (target === undefined || target === null) {
@@ -88,16 +93,16 @@ class Utils {
   }
 
   static clone(source) {
-    if (Object.prototype.toString.call(source) === '[object Array]') {
+    if (Utils.is('Array', source)) {
       let cloneResult = []
       for (let i = 0; i < source.length; i++) {
         cloneResult[i] = this.clone(source[i])
       }
       return cloneResult
-    } else if (Object.prototype.toString.call(source) === '[object Null]') {
+    } else if (Utils.is('Null', source)) {
       // fixes an issue where null values were converted to {}
       return null
-    } else if (Object.prototype.toString.call(source) === '[object Date]') {
+    } else if (Utils.is('Date', source)) {
       return source
     } else if (typeof source === 'object') {
       let cloneResult = {}
@@ -218,9 +223,9 @@ class Utils {
     )
     return rgb && rgb.length === 4
       ? '#' +
-          ('0' + parseInt(rgb[1], 10).toString(16)).slice(-2) +
-          ('0' + parseInt(rgb[2], 10).toString(16)).slice(-2) +
-          ('0' + parseInt(rgb[3], 10).toString(16)).slice(-2)
+      ('0' + parseInt(rgb[1], 10).toString(16)).slice(-2) +
+      ('0' + parseInt(rgb[2], 10).toString(16)).slice(-2) +
+      ('0' + parseInt(rgb[3], 10).toString(16)).slice(-2)
       : ''
   }