Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
Shadow DOM demo
<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<title>Shadow DOM</title>
span {
color: green;
<div id="hostElement"></div>
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>`;
<span>green span </span>