JiaLiPassion

class AngularCustomElementBridge {
  prepare(injector, component) {
    this.componentFactory = injector.get(ComponentFactoryResolver).resolveComponentFactory(component);
    // we use templateName to handle this case @Input('aliasName');
    this.observedAttributes = componentFactory.inputs.map(input => input.templateName); 
  }
}

JiaLiPassion

class AngularCustomElementBridge {
  setInputValue(propName, value) {
    if (!this.componentRef) {
      this.initialInputValues[propName] = value;
      return;
    }
    if (this.componentRef[propName] === value) {
      return;
    }
    this.componentRef[propName] = value;

JiaLiPassion

class AngularCustomElementBridge {
  destroy() {
    this.componentRef.destroy();
  }
}

JiaLiPassion

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

JiaLiPassion

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

JiaLiPassion

JiaLiPassion

class HelloComponentClass extends HTMLElement {
  constructor() {
    super();
  }

  static get observedAttributes() {
  }

  connectedCallback() {
  }

JiaLiPassion

import { Component, Input } from '@angular/core';

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

JiaLiPassion

JiaLiPassion

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