alrra/index.html

## index.html
<!doctype html>
<html class="no-js" lang="en">
<head>
    <meta charset="utf-8">
    <title>Feature detection test for &lt;style scoped&gt;</title>
    <style>
        .no-js .content,
        .feature .no,
        .no-feature .yes {
            display: none;
        }
    </style>
    <script>
        (function (window) {

            var document = window.document,
                docElement = document.documentElement;

            function addClass( className ) {
                docElement.className = docElement.className + ' ' + className;
            }

            docElement.className = docElement.className.replace(/(^|\s)no-js(\s|$)/, '$1js$2');

            if ( 'scoped' in document.createElement('style') ) {
                addClass('feature');
            } else {
                addClass('no-feature');
            }

        })(window);
    </script>
</head>
<body>
    <noscript>Please <a href="http://www.enable-javascript.com/" target="_blank">enable JavaScript</a>. Thank You! :D</noscript>
    <div class="content">
        <h1 class="yes">yap, it has support :D</h1>
        <h1 class="no">nope, it doesn't have support :(</h1>
        e.g.:
        <div>
            <style scoped>
               p {
                    color: red;
               }
            </style>
            <p>this text should be in red</p>
        </div>
        <p>this text should not be affected by the &lt;style scoped&gt; and remain black</p>
    </div>
</body>
</html>
	<!doctype html>
	<html class="no-js" lang="en">
	<head>
	<meta charset="utf-8">
	<title>Feature detection test for <style scoped></title>
	<style>
	.no-js .content,
	.feature .no,
	.no-feature .yes {
	display: none;
	}
	</style>
	<script>
	(function (window) {

	var document = window.document,
	docElement = document.documentElement;

	function addClass( className ) {
	docElement.className = docElement.className + ' ' + className;
	}

	docElement.className = docElement.className.replace(/(^\|\s)no-js(\s\|$)/, '$1js$2');

	if ( 'scoped' in document.createElement('style') ) {
	addClass('feature');
	} else {
	addClass('no-feature');
	}

	})(window);
	</script>
	</head>
	<body>
	<noscript>Please <a href="http://www.enable-javascript.com/" target="_blank">enable JavaScript</a>. Thank You! :D</noscript>
	<div class="content">
	<h1 class="yes">yap, it has support :D</h1>
	<h1 class="no">nope, it doesn't have support :(</h1>
	e.g.:
	<div>
	<style scoped>
	p {
	color: red;
	}
	</style>
	<p>this text should be in red</p>
	</div>
	<p>this text should not be affected by the <style scoped> and remain black</p>
	</div>
	</body>
	</html>