Skip to content

Instantly share code, notes, and snippets.

@DotNetNerd

DotNetNerd/ShadowDOM

Created May 22, 2013 08:55
Show Gist options
  • Save DotNetNerd/5626195 to your computer and use it in GitHub Desktop.
Save DotNetNerd/5626195 to your computer and use it in GitHub Desktop.
Download ZIP
Use of shadow DOM
Raw
ShadowDOM
<html>
<body>
<template id="nameTagTemplate">
<style>
.outer {
border: 2px solid pink;
border-radius: 1em;
font-size: 20pt;
width: 12em;
height: 7em;
text-align: center;
font-family: sans-serif;
font-weight: bold;
background-color: red;
}
.name {
font-size: 45pt;
font-weight: normal;
margin-top: 0.8em;
padding-top: 0.2em;
background-color: white;
}
h5 {
color:orange; /*Does not show*/
}
</style>
<div class="outer">
<div class="name">
<content></content>
<!--<content select=".first"></content>-->
</div>
Weee
</div>
</template>
<style>
h5 {
color:blue; /*Does show*/
}
.outer {
background-color: orange; /*Does not show*/
}
</style>
<div id="nameTag">Bob</div>
<script>
var shadow = document.querySelector('#nameTag').webkitCreateShadowRoot();
var template = document.querySelector('#nameTagTemplate');
shadow.appendChild(template.content);
template.remove();
document.querySelector('#nameTag').textContent = "Christian";
document.querySelector('#nameTag').innerHTML = "<h5>Baah</h5>";
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment