Web-component ng1.5 binding

by mslocum

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
<div ng-controller='test'>
<input type="text" ng-model="name" />
<p>{{name}}</p>
  <my-component name={{name}}></my-component>
</div>

<template id="template">
<h1>Name: <input type="text" id="nameInput"  /></h1>
</template>

JavaScript

var app = angular.module('myApp', []);

app.controller('test', function($scope) {
	$scope.name = "matt"
});


customElements.define('my-component',
  class extends HTMLElement {
    static get observedAttributes() {
      return ['name'];
    }
  
    connectedCallback() {
      this.name = this.getAttribute('name');

			const template = document.getElementById('template').content;
      this.myShadowRoot = this.attachShadow({mode: 'closed'});
      this.myShadowRoot.appendChild(template.cloneNode(true));

 			this.renderHTML();
    }
    
    attributeChangedCallback(name, oldValue, newValue) {
      this[name] = newValue;
      this.renderHTML();
    }
    
    renderHTML() {
			this.myShadowRoot.querySelector('.name').innerHTML = this.name;
    }
  }
);