Shadow DOM CSS + D3 Test

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
    
    /*Because the bars are rendered in the shadow dom, this does not apply.*/
    .bars{
      stroke:red;
    }
    
  </style>
</head>
<div id="outside"></div>
<template id="stylesTemplate">
    <style>
      
     	/*Because this CSS is inserted into the shadow dom, it works!*/ 
      .bars{
        stroke:white;
      }
      
      /*Because this is within a template tag, it is ignored 
      for the main page styling. */
      #conflictTest{
        color:red
      }
      
    </style>
  	<svg></svg>
</template>
<div id="conflictTest">
  This text is red if the shadow dom styles conflict with page styling.
</div>
<body>
  <script>
    
    //grap the container that will include shadow DOM elements. 
    var shadow = document.querySelector('#outside').createShadowRoot();
  	
    //get the DOM template containing styles to append into the shadow dom. 
    var template = document.querySelector('#stylesTemplate');
		
    var clone = document.importNode(template.content, true);
    shadow.appendChild(clone);

https://d3js.org/d3.v4.min.js