Skip to content

Instantly share code, notes, and snippets.

@pemrouz
Created December 22, 2014 01:15
Show Gist options
  • Save pemrouz/4a3e7ce9322c091ec058 to your computer and use it in GitHub Desktop.
Save pemrouz/4a3e7ce9322c091ec058 to your computer and use it in GitHub Desktop.
D3 and Shadow DOM
<!DOCTYPE html>
<body>
<textarea-native class=""></textarea-native>
<textarea-d3-native class=""></textarea-d3-native>
<li-d3 class=""></li-d3>
<textarea-d3 class=""></textarea-d3>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>
// works..
document
.querySelector('textarea-native')
.createShadowRoot()
.appendChild(document.createElement('textarea'))
// works..
var r1 = document
.querySelector('textarea-d3-native')
.createShadowRoot()
d3.select(r1)
.append(function(){ return document.createElement('textarea') })
// works..
var r2 = document
.querySelector('li-d3')
.createShadowRoot()
d3.select(r2)
.append('li')
.text('li')
// wat?
var r3 = document
.querySelector('textarea-d3')
.createShadowRoot()
d3.select(r3)
.append('textarea')
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment