Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
Shadow DOM demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Shadow DOM</title>
<style>
span {
color: green;
}
</style>
</head>
<body>
<div id="hostElement"></div>
<script>
var hostElement = document.querySelector('#hostElement');
var shadow;
if (hostElement.attachShadow) {
//Chrome Safari Opera, in chrome dev-tools check "Show user agent shadow DOM"
shadow = hostElement.attachShadow({mode: 'open'});
} else if (hostElement.createShadowRoot) {
//Firefox Nightly: Go to `about:config`, enable `dom.webcomponents.enabled`
shadow = hostElement.createShadowRoot({mode: 'open'});
}
shadow.innerHTML = `<span>red span</span>
<style>span { color: red; }</style>`;
</script>
<span>green span </span>
</body>
</html>