JiaLiPassion JiaLiPassion

## zone-onbeforeunload.html
<!DOCTYPE html>
<html>
<head>
  <script src="./zone.js"></script>
  <script>
    const desc = Object.getOwnPropertyDescriptor(window, 'onbeforeunload');
    if (desc) {
      const oriGet = desc.get;
      const oriSet = desc.set;
      const preDefinedEvent = document.createEvent('Event');

## zone-blacklist.js
// before load polyfill.js
<script>
// black list scroll event handler for addEventListener
Zone[Zone.__symbol__('BLACK_LISTED_EVENTS')] = ['scroll', 'mouseenter', 'mouseleave', 'mousemove', 'mouseover', 'mouseout', 'mousewheel'];

// black list scroll event handler for onProp
const targets = [window, Document.prototype, HTMLBodyElement.prototype, HTMLElement.prototype];
 __Zone_ignore_on_properties = [];
targets.forEach(function(target) {
  __Zone_ignore_on_properties.push({

## app-hello.html
<hello-elem name="Custom Elements"></hello-elem>

## app-hello.js
class AppHello extends HTMLElement {
  constructor() {
    super();
  }

  // define which attributes need to be observed so attributeChangedCallback will be triggered
  // when according attribute changed.
  static get observedAttributes() {return ['name']; }

  // getter to do a attribute -> property reflection

## custom-element.csv

          
            callback
             summary

            
              constructor
               initialize state or shadowRoot if needed

            
              connectedCallback
               Will be called when element is added to DOM

            
              disconnctedCallback
               Will be called when element is removed from DOM

            
              attributeChangedCallback
               Will be called when attribute of the element change

## hello.component.ts
import { Component, Input } from '@angular/core';

@Component({
  selector: 'app-hello',
  template: `<div>{{name}}</div>`
})
export class HelloComponent  {
  @Input() name: string;
}

## empty-custom-element.ts
class HelloComponentClass extends HTMLElement {
  constructor() {
    super();
  }

  static get observedAttributes() {
  }

  connectedCallback() {
  }

## angular-callback.csv

          
            callback 
             summary 
             angular part

            
              constructor
              initialize internalstate
              do some preparation work

            
              connectedCallback
              initialize View/Event Listener
              Load Angular Component

            
              disconnectedCallback
              clear View/Event Listener
              Destroy Angular Component

            
              attributeChangedCallback
              Handle attribute change
              Handle @Input Change

## angular-element-impl-constructor.ts
this.componentFactory = injector.get(ComponentFactoryResolver).resolveComponentFactory(component);
this.observedAttributes = componentFactory.inputs.map(input => input.templateName); // we use templateName to handle this case @Input('aliasName');

## angular-element-impl-initcomponent.ts
class AngularCustomElementBridge {
  initComponent(element: HTMLElement) {
    // first we need an componentInjector to initialize the component.
    // here the injector is from outside of Custom Element, user can register some of their own
    // providers in it.
    const componentInjector = Injector.create([], this.injector);

    this.componentRef = this.componentFactory.create(componentInjector, null, element);

    // Then we need to check whether we need to initialize value of component's input
	<!DOCTYPE html>
	<html>
	<head>
	<script src="./zone.js"></script>
	<script>
	const desc = Object.getOwnPropertyDescriptor(window, 'onbeforeunload');
	if (desc) {
	const oriGet = desc.get;
	const oriSet = desc.set;
	const preDefinedEvent = document.createEvent('Event');
	// before load polyfill.js
	<script>
	// black list scroll event handler for addEventListener
	Zone[Zone.__symbol__('BLACK_LISTED_EVENTS')] = ['scroll', 'mouseenter', 'mouseleave', 'mousemove', 'mouseover', 'mouseout', 'mousewheel'];

	// black list scroll event handler for onProp
	const targets = [window, Document.prototype, HTMLBodyElement.prototype, HTMLElement.prototype];
	__Zone_ignore_on_properties = [];
	targets.forEach(function(target) {
	__Zone_ignore_on_properties.push({
	class AppHello extends HTMLElement {
	constructor() {
	super();
	}

	// define which attributes need to be observed so attributeChangedCallback will be triggered
	// when according attribute changed.
	static get observedAttributes() {return ['name']; }

	// getter to do a attribute -> property reflection
	callback	summary
	constructor	initialize state or shadowRoot if needed
	connectedCallback	Will be called when element is added to DOM
	disconnctedCallback	Will be called when element is removed from DOM
	attributeChangedCallback	Will be called when attribute of the element change
	import { Component, Input } from '@angular/core';

	@Component({
	selector: 'app-hello',
	template: `<div>{{name}}</div>`
	})
	export class HelloComponent {
	@Input() name: string;
	}
	class HelloComponentClass extends HTMLElement {
	constructor() {
	super();
	}

	static get observedAttributes() {
	}

	connectedCallback() {
	}
callback	summary	angular part
constructor	initialize internalstate	do some preparation work
connectedCallback	initialize View/Event Listener	Load Angular Component
disconnectedCallback	clear View/Event Listener	Destroy Angular Component
attributeChangedCallback	Handle attribute change	Handle @Input Change
	this.componentFactory = injector.get(ComponentFactoryResolver).resolveComponentFactory(component);
	this.observedAttributes = componentFactory.inputs.map(input => input.templateName); // we use templateName to handle this case @Input('aliasName');
	class AngularCustomElementBridge {
	initComponent(element: HTMLElement) {
	// first we need an componentInjector to initialize the component.
	// here the injector is from outside of Custom Element, user can register some of their own
	// providers in it.
	const componentInjector = Injector.create([], this.injector);

	this.componentRef = this.componentFactory.create(componentInjector, null, element);

	// Then we need to check whether we need to initialize value of component's input