Build Web Components

with Angular Elements

@VirtualOverride

Frontend Developer

github.com/aelbore

@VirtualOverride

Arjay Elbore

About Me

https://geocine.github.io/custom-elements-ts/

Frameworks and Libraries

Web Components

set of web platform APIs that allow you to create new custom, reusable, encapsulated HTML tags to use in web pages and web apps. Custom components and widgets build on the Web Component standards, will work across modern browsers, and can be used with any JavaScript library or framework that works with HTML.

Custom Elements

Shadow DOM

HTML Template

ES Modules

Web Components Specs

HTML Template

used to declare fragments of HTML that can be cloned and inserted in the document by script.

<h1>The template Tag</h1>

<p>Content inside a template tag is hidden from the client.</p>

<template>
  <h2>Flower</h2>
  <img src="img_white_flower.jpg" width="214" height="204">
</template>

<p> 
  A later example will show you how to use JavaScript 
  to display the template content.
</p>

ES Module

defines the inclusion and reuse of JS documents in other JS documents.

<script type="module" src="https://unpkg.com/lodash-es@4.17.11/sum.js"></script>

or 

...

<script type="module">
  import sum from 'https://unpkg.com/lodash-es@4.17.11/sum.js'

  const total = sum([1,2])

  console.log(total)

</script>

ShadowDOM

defines how to use encapsulated style and markup in web components.

Custom Elements

Provides a way for authors to build their own fully-feature DOM elements.

<hello-world name="Arjay"></hello-world>

class HelloName extends HTMLElement {

  static get observedAttributes() {
    return [ 'name' ]
  }

  get name() {
    return this.getAttribute('name') || 'World'
  }

  set name(value) {
    this.setAttribute('name', value)
  }

  attributeChangedCallback(name, oldValue, newValue) {
    if (newValue !== oldValue) {
      this.render()
    }
  }

  connectedCallback() {
    this.render()
  }

  render() {
    this.innerHTML = `
      <h1>Hello ${this.name}</h1>
    `
  }

}

customElements.define('hello-name', HelloName)

Angular Elements

are Angular components packaged as custom elements (also called Web Components), a web standard for defining new HTML elements in a framework-agnostic way.

import { createCustomElement } from '@angular/elements';

....

const HelloWorldElement = createCustomElement(HelloWorldComponent, { injector })
customElements.define('hello-world', HelloWorldElement)

....

import { Component, ViewEncapsulation, Input, NgModule, Injector } from '@angular/core'
import { BrowserModule, platformBrowser } from '@angular/platform-browser';
import { createCustomElement } from '@angular/elements';

@Component({
  selector: 'hello-world',
  template: `
    <h1>Hello {{ name }}</h1>
  `,
  encapsulation: ViewEncapsulation.ShadowDom
})
export class HelloWorldComponent { 

  @Input() name: string = 'World'

}

@NgModule({
  imports: [ BrowserModule ],
  declarations: [ HelloWorldComponent ],
  entryComponents: [ HelloWorldComponent ]
})
export class HelloWorldModule {

  constructor(injector: Injector) { 
    const HelloWorldElement = createCustomElement(HelloWorldComponent, { injector })
    customElements.define('hello-world', HelloWorldElement)
  }

  ngDoBootstrap() { }

}

platformBrowser().bootstrapModule(HelloWorldModule)

<thank-you></thank-you>