mforando/.block

## .block
license: mit

## README.md

      
    Raw
  

              README.md
            
          
    Built with blockbuilder.org

  
## index.html
<!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);


    var width = 400;
    var height = 150;

  	var shadow_svg = d3.select(shadow).select('svg')
    	.attr("width",width)
    	.attr("height",height)
    	.style("outline","1px solid cyan");

    var psuedoData = d3.range(10);

    var scaleBand = d3.scaleBand()
    	.domain(psuedoData)
    	.range([0,width]);

    var scaleY = d3.scaleLinear()
    	.domain([psuedoData[0],psuedoData[9]])
    	.range([height,0]);

    var bars = shadow_svg.selectAll(".bars").data(psuedoData)
    bars.enter()
    	.append("rect")
	    .attr("class","bars")
    	.attr("width",scaleBand.bandwidth())
    	.attr("height",function(d){return scaleY(0)-scaleY(d)})
    	.attr("fill","gray")
    	.attr("x",function(d){return scaleBand(d)})
    	.attr("y",function(d){return scaleY(d)})

		console.log(shadow_svg)

  </script>
</body>
	<!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);



	var width = 400;
	var height = 150;

	var shadow_svg = d3.select(shadow).select('svg')
	.attr("width",width)
	.attr("height",height)
	.style("outline","1px solid cyan");

	var psuedoData = d3.range(10);

	var scaleBand = d3.scaleBand()
	.domain(psuedoData)
	.range([0,width]);

	var scaleY = d3.scaleLinear()
	.domain([psuedoData[0],psuedoData[9]])
	.range([height,0]);

	var bars = shadow_svg.selectAll(".bars").data(psuedoData)
	bars.enter()
	.append("rect")
	.attr("class","bars")
	.attr("width",scaleBand.bandwidth())
	.attr("height",function(d){return scaleY(0)-scaleY(d)})
	.attr("fill","gray")
	.attr("x",function(d){return scaleBand(d)})
	.attr("y",function(d){return scaleY(d)})

	console.log(shadow_svg)

	</script>
	</body>