From 4081f1b7a261e18a584b8bc96aede8282cf0a28d Mon Sep 17 00:00:00 2001
From: Javier Luraschi <javierluraschi@hotmail.com>
Date: Fri, 18 May 2018 10:44:11 -0700
Subject: [PATCH] support disabling shadow dom feature with r2d3.shadow option

---
 R/render.R                               |  9 ++++++++-
 inst/htmlwidgets/lib/r2d3/r2d3-render.js | 16 +++++++++++++---
 2 files changed, 21 insertions(+), 4 deletions(-)

diff --git a/R/render.R b/R/render.R
index ceb6d69..0856154 100644
--- a/R/render.R
+++ b/R/render.R
@@ -26,6 +26,12 @@
 #'
 #' @import htmlwidgets
 #' @import tools
+#' 
+#' @details
+#' 
+#' In order to correctly scope CSS styles correctly when multiple widgets are rendered,
+#' the Shadow DOM and the wecomponents polyfill is used, this feature can be turned off
+#' by setting the \code{r2d3.shadow} option to \code{FALSE}.
 #'
 #' @examples
 #'
@@ -113,7 +119,8 @@ r2d3 <- function(
     theme = list(
       default = default_theme(),
       runtime = runtime_theme()
-    )
+    ),
+    useShadow = getOption("r2d3.shadow", TRUE)
   )
   
   # resolve viewer if it's explicitly specified
diff --git a/inst/htmlwidgets/lib/r2d3/r2d3-render.js b/inst/htmlwidgets/lib/r2d3/r2d3-render.js
index cd9e569..a86f649 100644
--- a/inst/htmlwidgets/lib/r2d3/r2d3-render.js
+++ b/inst/htmlwidgets/lib/r2d3/r2d3-render.js
@@ -15,6 +15,7 @@ function R2D3(el, width, height) {
   self.captureErrors = null;
   self.theme = {};
   self.style = null;
+  self.useShadow = true;
   
   self.setX = function(newX) {
     x = newX;
@@ -29,6 +30,10 @@ function R2D3(el, width, height) {
     }
     
     self.options = x.options;
+    
+    if (!x.useShadow) {
+      self.useShadow = false;
+    }
   };
   
   self.setContainer = function(container) {
@@ -48,9 +53,14 @@ function R2D3(el, width, height) {
   
   self.createRoot = function() {
     if (self.shadow === null) {
-      self.shadow = el.attachShadow({
-        mode: "open"
-      });
+      if (self.useShadow && el.attachShadow) {
+        self.shadow = el.attachShadow({
+          mode: "open"
+        });
+      }
+      else {
+        self.shadow = el;
+      }
     }
     
     if (self.root !== null) {