Build Web Components
with Angular Elements
@VirtualOverride
Frontend Developer
github.com/aelbore
@VirtualOverride
Arjay Elbore
About Me
Frameworks and Libraries
Web Components
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>
Build Web Components with Angular Elements
By aelbore
Build Web Components with Angular Elements
Building Web Components with Angular Elements
