A simple WebComponent example without a polyfill.

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>My First WebComponent</title>
    <style>
        .coloured {
            color: green !important;
        }
    </style>
    <link rel="import" href="favorite-colour.html" />
</head>
<body>
    <h1>What are WebComponents and why are they important?</h1>
    <p>Sample code accompanying an article about <a href="#">WebComponents</a>. This example will only work in browsers that <a href="http://webcomponents.org/" target="_blank">support WebComponents</a>.</p>
    <favorite-colour></favorite-colour>
    <p class="coloured">Some standard HTML not part of a WebComponent.</p>
</body>
</html>

#My First WebComponent

A look at the up coming WebComponent standard, how to write WebComponents and a look into why we should care about them.

Take a look at the article: [What are WebComponents and why are they important?](http://www.revillweb.com/articles/why-web-components-are-important/).

<!-- WebComponent example based off element-boilerplate: https://github.com/webcomponents/element-boilerplate -->
<template>
    <style>
        .coloured {
            color: red;
        }
    </style>
    <p>My favorite colour is: <strong class="coloured">Red</strong></p>
</template>
<script>
    (function() {
        // Creates an object based in the HTML Element prototype
        var element = Object.create(HTMLElement.prototype);
        // Gets content from <template>
        var template = document.currentScript.ownerDocument.querySelector('template').content;
        // Fires when an instance of the element is created
        element.createdCallback = function() {
            // Creates the shadow root
            var shadowRoot = this.createShadowRoot();
            // Adds a template clone into shadow root
            var clone = document.importNode(template, true);
            shadowRoot.appendChild(clone);
        };
        document.registerElement('favorite-colour', {
            prototype: element
        });
    }());
</script>