support disabling shadow dom feature with r2d3.shadow option

rstudio · May 18, 2018 · 4081f1b · 4081f1b
1 parent 4e13061
commit 4081f1b
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 4 deletions.
diff --git 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
@@ -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) {