dongyuwei/Shadow-DOM.html

## Shadow-DOM.html
<!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>
	<!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>