Simple hello world web component

demo-shell-ng2/app/app.component.html

@@ -58,7 +58,7 @@
                 <a [routerLink]="['Page1']">Native</a>
             </li>
             <li [class.active]="isActive(['Page2'])">
-                <a [routerLink]="['Page2']">Page 2</a>
+                <a [routerLink]="['Page2']">WebComponents</a>
             </li>
             <li [class.active]="isActive(['Forms'])">
                 <a [routerLink]="['Forms']">Forms</a>

demo-shell-ng2/app/components/page2.view.ts

@@ -5,10 +5,13 @@ import {Component} from "angular2/core";
         <div class="container">
             <div class="row">
                 <h1>Page 2</h1>
+                <input [(ngModel)]="username">
+                <span>Username: {{username}}</span>
+                <hello-world [who]="username"></hello-world>
             </div>
         </div>
     `
 })
 export class Page2View {
-
+    username: string = 'Unicorn';
 }

demo-shell-ng2/app/web-components/helloworld/helloworld.html

@@ -0,0 +1,62 @@
+<!-- Defines element markup -->
+<template>
+    <p>Hello <strong></strong> :)</p>
+</template>
+
+<script>
+    (function (window, document, undefined) {
+        // Refers to the "importer", which is index.html
+        var thatDoc = document;
+
+        // Refers to the "importee", which is src/hello-world.html
+        var thisDoc =  (thatDoc._currentScript || thatDoc.currentScript).ownerDocument;
+
+        // Gets content from <template>
+        var template = thisDoc.querySelector('template').content;
+
+        // Creates an object based in the HTML Element prototype
+        var MyElementProto = Object.create(HTMLElement.prototype);
+
+        // Creates the "who" attribute and sets a default value
+        MyElementProto.who = 'World';
+
+        // Fires when an instance of the element is created
+        MyElementProto.createdCallback = function() {
+            // Creates the shadow root
+            var shadowRoot = this.createShadowRoot();
+            // Adds a template clone into shadow root
+            var clone = thatDoc.importNode(template, true);
+            shadowRoot.appendChild(clone);
+            // Caches <strong> DOM query
+            this.strong = shadowRoot.querySelector('strong');
+            // Checks if the "who" attribute has been overwritten
+            if (this.hasAttribute('who')) {
+                var who = this.getAttribute('who');
+                this.setWho(who);
+            }
+            else {
+                this.setWho(this.who);
+            }
+        };
+        // Fires when an attribute was added, removed, or updated
+        MyElementProto.attributeChangedCallback = function(attr, oldVal, newVal) {
+            if (attr === 'who') {
+                this.setWho(newVal);
+            }
+
+            if (attr === 'text') {
+                this.setWho(newVal);
+            }
+        };
+        // Sets new value to "who" attribute
+        MyElementProto.setWho = function(val) {
+            this.who = val;
+            // Sets "who" value into <strong>
+            this.strong.textContent = this.who;
+        };
+        // Registers <hello-world> in the main document
+        window.MyElement = thatDoc.registerElement('hello-world', {
+            prototype: MyElementProto
+        });
+    })(window, document);
+</script>

demo-shell-ng2/index.html

@@ -17,6 +17,7 @@
     <!--ALFRESCO CUSTOM WEBCOMPONENTS-->
     <link rel="import" href="webcomponents/file-upload/file-upload.html">
     <link rel="import" href="webcomponents/alfresco-file-list/src/alfresco-file-list.html">
+    <link rel="import" href="app/web-components/helloworld/helloworld.html">
 
     <!-- 1. Load libraries -->
     <!-- IE required polyfills, in this exact order -->