Comps: Hello World

Small example of Comps implementation of web components.

by Andres Rodriguez

HTML

<script src="http://tools.wallooza.net/comps.js"></script>
<h1>Hello World Example</h1>
<hello-world who="John Smith">You should not see this!</hello-world>
<p>
  Above is a <i>Hello World</i> block. Heavily inspired by this
  <a href="https://github.com/webcomponents/hello-world-element">Hello World</a>.
</p>

CSS

hello-world {
    background-color: #F3F3F3;
    border: 1px solid #DDD;
    border-radius: 5px;
    display: block;
    padding: 10px 10px;
    margin: 5px 0px;
}

JavaScript

(function(exports) {

    // Creates prototype and registers widget
    exports.prototype = Object.create(HTMLElement.prototype);
    document.registerElement("hello-world", {
        prototype: exports.prototype,
        styleUrl: "hw.css",
        template: "<p>Hello <strong></strong> :)</p>"
    });

    exports.prototype.createdCallback = function() {
        render(this);
    };

    function render(elem) {
        elem.innerHTML = elem.template;
        var strong = elem.querySelector("strong");
        strong.textContent = (elem.getAttribute("who") || "World");
    }

})(typeof(exports) == "undefined" ? this : exports);