What - Web Components

• Custom Elements

• Shadow DOM

• HTML imports

• HTML Template

What - Angular Elements

Angular elements are Angular components packaged as custom elements, a web standard for defining new HTML elements in a framework-agnostic way.

• https://angular.io/guide/elements

Why - Portability

• Migrating Older projects
• Organization-wide component library

Making A Basic WebComponent

class Countdown extends HTMLElement {
  connectedCallback() {
    const template = `
      <button class="countdown-start">Start the countdown</button>
      <span class="seconds-left"></span>
      `;
    this.innerHTML = template;

    // Useful references
    this.button = this.querySelector('.countdown-start');
    this.secondsDisplay = this.querySelector('.seconds-left');

    // Initialize
    this.button.addEventListener('click', () => this.handleClick());
  }

  handleClick() {
      if(this.hasAttribute('seconds')) {
        this.seconds = +this.getAttribute('seconds');
      } else {
        this.seconds = 10;
      }
      this.updateTimer();
      this.button.disabled = true;
      this.button.innerHTML = 'YOU DID IT';
      this.updateTimer();
      const counter = window.setInterval(() => {
        this.seconds--;
        this.updateTimer();
        if (this.seconds === 0) {
          window.clearInterval(counter);
          console.info('BOOM');
          this.dispatchEvent(new Event('boom'));
        }
      }, 1000);
  }

  updateTimer() {
      this.secondsDisplay.innerHTML = this.seconds;
  }

}

Lifecycle Callbacks

• connectedCallback => componentDidMount

• disconnectedCallback => componentWillUnmount

• attributeChangedCallback => componentDidUpdate

• adoptedCallback => ¯\_(ツ)_/¯

https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements#Using_the_lifecycle_callbacks

Using A Basic Web Component

<!-- Add it to the DOM -->
<countdown-timer seconds=20></countdown-timer>

<script>
  // Define the element on the global CustomElementRegistry
  window.customElements.define('countdown-timer', Countdown);

  // Listening to the output event
  document.querySelector('countdown-timer')
    .addEventListener('boom', function(event) {
      console.log('BOOM');
    });
</script>

Angular Elements (component)

import { Component, OnInit, Input, Output, EventEmitter, ViewEncapsulation } from '@angular/core';

@Component({
  selector: 'ng-wolf',
  template: `
    <img [src]="avatar" (click)="reveal($event)" alt="Wolf" />
  `,
  styles: [`
    img {
      max-width: 100%;
      height: auto;
    }
  `],
  encapsulation: ViewEncapsulation.Native
})
export class WolfComponent implements OnInit {

  @Input()
  name: string;

  @Input()
  avatar: string;

  @Output()
  revealed = new EventEmitter();

  constructor() { }

  ngOnInit() {
  }

  reveal(event) {
    this.revealed.emit(`You found me. I am ${this.name} the WolfComponent.`);
  }

}

Angular Elements (exporting)

export class AppModule {

  constructor(private injector: Injector) {
    const wolfElement = createCustomElement(WolfComponent, {injector});
    window.customElements.define('ng-wolf', wolfElement);
  }

  // required because we are not bootstrapping into a dom element
  ngDoBootstrap() {}
}

Consuming a Web Component in React

Polyfill

<script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/2.0.2/webcomponents-loader.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/2.0.2/custom-elements-es5-adapter.js"></script>

Reactify

export const MyReactComponent = reactify(MyWebComponent);

Demo Time

Caveats

• Framework overhead (~60kb in this case)
• Inelegant import process

Framework Overhead

~60kb in this case

Inelegant Import Process (Angular Specific)

import reactify from 'skatejs-react-integration';

const components = {};

const { meta, elements } = window.myElements;

meta.tags.forEach(tag => {
  const element = elements[tag];
  const component = reactify(element);
  components[meta.namesByTag[tag]] = component;
});

export default components;

Demo Time (The Code)

Thoughts

Citations and Further Reading

• https://www.webcomponents.org/introduction

• https://angular.io/guide/elements

• https://github.com/webcomponents/react-integration

• https://custom-elements-everywhere.com/

• https://medium.com/@tomsu/building-web-components-with-angular-elements-746cd2a38d5b

Citations (contd): Images

• http://www.thriveafterabuse.com/wp-content/uploads/2015/08/wolf-in-sheeps-clothing.jpg

Ready To Dive in Yourself