kgust/template_example.html

## template_example.html
<!doctype html>
<!-- Most of this information comes from:
     https://www.html5rocks.com/en/tutorials/webcomponents/template/
     Apple's propsal adds variables:
     https://github.com/w3c/webcomponents/blob/gh-pages/proposals/Template-Instantiation.md
-->
<html>
    <head>
        <style>
            .bordered { border: 1px solid #ddd; border-radius: 4px; }
            div { margin-bottom: 5px; }
        </style>
    </head>
    <body>
        <template id="mytemplate">
            <div class="bordered">
                <p>This is from the &lt;template&gt; tag.</p>
                <img src="" alt="great image">
                <div class="comment">This is a comment!</div>
            </div>
        </template>

        <blahblah id="nonsense_tag">
            <div class="bordered">
                <p>
                    Nonsense tags act like a div, but not in all aspects.
                    Style could be applied to this inner div but not &lt;blahblah&gt; itself.</p>
                <img src="" alt="great image">
                <div class="comment">This is another comment!</div>
            </div>
        </blahblah>

        <script>
            function supportsTemplate() {
                return 'content' in document.createElement('template');
            }

            if (supportsTemplate()) {
                var t = document.querySelector('#mytemplate');
                // Populate the src at runtime.
                t.content.querySelector('img').src = 'logo.png';

                var clone = document.importNode(t.content, true);
                document.body.appendChild(clone);
            } else {
                // using display:none hides this from IE
                document.getElementById('mytemplate').style.display = 'none';

                /* Use older template techniques here. */
            }

        </script>
    </body>
</html>
	<!doctype html>
	<!-- Most of this information comes from:
	https://www.html5rocks.com/en/tutorials/webcomponents/template/
	Apple's propsal adds variables:
	https://github.com/w3c/webcomponents/blob/gh-pages/proposals/Template-Instantiation.md
	-->
	<html>
	<head>
	<style>
	.bordered { border: 1px solid #ddd; border-radius: 4px; }
	div { margin-bottom: 5px; }
	</style>
	</head>
	<body>
	<template id="mytemplate">
	<div class="bordered">
	<p>This is from the <template> tag.</p>
	<img src="" alt="great image">
	<div class="comment">This is a comment!</div>
	</div>
	</template>

	<blahblah id="nonsense_tag">
	<div class="bordered">
	<p>
	Nonsense tags act like a div, but not in all aspects.
	Style could be applied to this inner div but not <blahblah> itself.</p>
	<img src="" alt="great image">
	<div class="comment">This is another comment!</div>
	</div>
	</blahblah>

	<script>
	function supportsTemplate() {
	return 'content' in document.createElement('template');
	}

	if (supportsTemplate()) {
	var t = document.querySelector('#mytemplate');
	// Populate the src at runtime.
	t.content.querySelector('img').src = 'logo.png';

	var clone = document.importNode(t.content, true);
	document.body.appendChild(clone);
	} else {
	// using display:none hides this from IE
	document.getElementById('mytemplate').style.display = 'none';

	/* Use older template techniques here. */
	}

	</script>
	</body>
	</html>