Building Reusable Custom Elements With Angular

BUILDING REUSABLE CUSTOM ELEMENTS
USING ANGULAR

A B O U T M E
{
"name": "Ilia Idakiev",
"experience": [
"Developer & Founder of HNS/HG“,
"Lecturer in 'Advanced JS' @ Sofia University”,
"Contractor / Consultant",
“Public / Private Courses“
],
"involvedIn": [
"SofiaJS", "BeerJS", "Angular Sofia"
]
}

BUILDING REUSABLE CUSTOM ELEMENTS USING ANGULAR
I LOVE VINYL

SEPARATION OF CONCERNS (SOC)
▸ Design principle for separating a computer program into distinct sections, such
that each section addresses a separate concern. (Modularity)

S.O.L.I.D PRINCIPLES OF OBJECT-ORIENTED PROGRAMMING
▸ Single Responsibility Principle
▸ Open / Close Principle
▸ Liskov Substitution Principle
▸ Interface Segregation Principle
▸ Dependency Inversion Principle
http://aspiringcraftsman.com/2011/12/08/solid-javascript-single-responsibility-principle/

MODE - VIEW - CONTROLLER
▸ MODEL - the central component of the pattern. It
is the application's dynamic data structure,
independent of the user interface. It directly
manages the data, logic and rules of the
application.
▸ VIEW - any output representation of information.
▸ CONTROLLER - accepts input and converts it to
commands for the model.

WEB COMPONENTS
▸ Introduced by Alex Russell (Chrome team @ Google)  
at Fronteers Conference 2011
▸ A set of features currently being added by the W3C to
the HTML and DOM speciﬁcations that allow the creation of
reusable widgets or components in web documents and web applications.
▸ The intention behind them is to bring component-based software
engineering to the World Wide Web.

WEB COMPONENTS FEATURES:
▸ HTML Templates - an HTML fragment is not rendered, but stored until it is
instantiated via JavaScript.
▸ Shadow DOM - Encapsulated DOM and styling, with composition.
▸ Custom Elements - APIs to deﬁne new HTML elements.
▸ HTML Imports - Declarative methods of importing HTML documents into other
documents. (Replaced by ES6 Imports).

DEFINE CUSTOM ELEMENT
(function () {
const template = createTemplate('<div>Hello World<div>');
class Counter extends HTMLElement {
constructor() {
super();
const shadowRoot = this.attachShadow({ mode: 'open' });
shadowRoot.appendChild(template.content.cloneNode(true));
}
}
customElements.define('hg-counter', Counter);
}());
Create an isolated scope
counter.js

(function () {
constructor() {
super();
}
}
}());
DEFINE CUSTOM ELEMENT Create a new class that extends HTMLElement
counter.js

(function () {
constructor() {
super();
}
}
}());
DEFINE CUSTOM ELEMENT Register the new custom element.
counter.js

HTML TEMPLATES
▸ The <template> tag holds its content hidden from the client.
▸ Content inside a <template> tag will be parsed but not rendered.
▸ The content can be visible and rendered later by using JavaScript.

WAYS TO CREATE A TEMPLATE
<template id="template">
<h2>Hello World</h2>
</template>
const template =
document.createElement('template');
template.innerHTML =
'<h2>Hello World</h2>';
Using HTML Using JavaScript

CREATE TEMPLATE HELPER FUNCTION
function createTemplate(string) {
const template = document.createElement('template');
template.innerHTML = string;
return template;
}
utils.js

CREATE THE TEMPLATE
(function () {
constructor() {
super();
}
}
}());
Use the create template helper function.
counter.js

SHADOW DOM
▸ Isolated DOM - The component's DOM is self-contained
(e.g. document.querySelector() won't return nodes in the component's shadow DOM).
▸ Scoped CSS - CSS deﬁned inside shadow DOM is scoped to it. Style rules
don't leak out and page styles don't bleed in.
▸ Composition - done with the <slot> element. 
(Slots are placeholders inside your component that users can ﬁll with their own markup).

DEFINE CUSTOM ELEMENT
(function () {
constructor() {
super();
}
}
}());
counter.js
Utilise the class constructor.

ATTACH SHADOW DOM
(function () {
constructor() {
super();
}
}
}());
Attach the shadow DOM.
counter.js

(function () {
constructor() {
super();
}
}
}());
CREATE THE TEMPLATE Attach the template contents to the shadow root.
counter.js

USE OUR CUSTOM ELEMENT
<body>
<hg-counter></hg-counter>
<script src="./util.js"></script>
<script src="./counter.js"></script>
</body>
index.html

EXTEND OUR CUSTOM ELEMENT
index.html
(function () {
const template = createTemplate(`
<div name="value"></div>
<button data-type=“dec">-</button>
<button data-type="inc">+</button>
`);
constructor() {
super();

index.html
constructor() {
super();
shadowRoot.addEventListener('click', ({ target }) => {
const type = target.getAttribute('data-type');
if (type === 'dec') {
this.counter--;
} else if (type === 'inc') {
this.counter++;
}
});

index.html
set counter(value) {
this._counter = value;
}
get counter() {
return this._counter;
}
constructor() {
super();
this.counter = 0;

UPDATING THE DOM
utils.js
function updateDOM(root, updates) {
updates.forEach(item => {
root.querySelectorAll(`[name=${item.name}]`).forEach(element =>
element.textContent = item.value
);
});
}

index.html
constructor() {
super();
this.counter = 0;
this._update = () => {
updateDOM(shadowRoot, [{
name: 'value',
value: this.counter
}]);
}

index.html
set counter(value) {
this._counter = value;
this._update();
}
get counter() {
return this._counter;
}
constructor() {
super();
this.counter = 0;

CUSTOM COMPONENT ATTRIBUTES
index.html
<body>
<hg-counter value="10"></hg-counter>
<script src="./util.js"></script>
<script src="./counter.js"></script>
</body>

CUSTOM ELEMENTS LIFECYCLE CALLBACKS
▸ connectedCallback - Invoked each time the custom element is appended into a
document-connected element. This will happen each time the node is moved, and
may happen before the element's contents have been fully parsed.
▸ disconnectedCallback - Invoked each time the custom element is disconnected
from the document's DOM.
▸ attributeChangedCallback - Invoked each time one of the custom element's
attributes is added, removed, or changed.
▸ adoptedCallback - Invoked each time the custom element is moved to a new
document.

index.html
static get observedAttributes() {
return ['value'];
}
attributeChangedCallback(name, oldValue, newValue) {
if (name === 'value') {
this.counter = newValue;
}
}
constructor() {
Handle attribute changes

index.html
static get observedAttributes() {
return ['value'];
}
attributeChangedCallback(name, oldValue, newValue) {
if (name === 'value') {
this.counter = newValue;
}
}
constructor() {
Deﬁne which attributes should be watched

CUSTOM COMPONENT STYLES
index.html
Apply scoped styles to our component
(function () {
const template = createTemplate(`
<style>
:host {
display: flex;
}
div[name="value"] {
min-width: 30px;
}
</style>
<div name="value"></div>
<button data-type="dec">-</button>
<button data-type="inc">+</button>
`);

FURTHER READING
▸ Extending different HTML Elements 
(e.g. HTMLButton)
▸ Dispatching Custom Events

BENEFITS OF USING CUSTOM COMPONENTS
▸ Framework agnostic - Written in JavaScript and native to the browser.
▸ Simpliﬁes CSS - Scoped DOM means you can use simple CSS selectors, more
generic id/class names, and not worry about naming conﬂicts.
• Productivity - Think of apps in chunks of DOM rather than one large (global) page.
▸ Productivity - Think of apps in chunks of DOM rather than one large (global)
page.

BROWSER SUPPORT

COSTS OF USING CUSTOM COMPONENTS
▸ Template Generation - manually construct the DOM for our templates  
(No JSX features or Structural Directives)
▸ DOM Updates - manually track and handle changes to our DOM 
(No Virtual DOM or Change Detection)

LIT HTML
▸ Library Developed by the Polymer Team @ GOOGLE
▸ Efﬁcient - lit-html is extremely fast. It uses fast platform features like
HTML <template> elements with native cloning.
▸ Expressive - lit-html gives you the full power of JavaScript and functional programming
patterns.
▸ Extensible - Different dialects of templates can be created with additional features for setting
element properties, declarative event handlers and more.
▸ It can be used standalone for simple tasks, or combined with a framework or component model,
like Web Components, for a full-featured UI development platform.
▸ It has an awesome VSC extension for syntax highlighting and formatting.

FRAMEWORKS
▸ StencilJS - a simple library for generating Web Components and
progressive web apps (PWA).  
(built by the Ionic Framework team for its next generation of performant mobile and desktop Web
Components)
▸ Polymer - library for creating web components. 
(built by Google and used by YouTube, Netﬂix, Google Earth and others)
▸ SkateJS - library providing functional abstraction over web
components.
▸ Angular Elements

WEB COMPONENTS SERVER SIDE RENDERING
▸ Rendertron - Rendertron is a headless Chrome rendering solution
designed to render & serialise web pages on the ﬂy.
▸ SkateJS SSR - @skatejs/ssr is a web component server-side
rendering and testing library.

ANGULAR ELEMENTS
▸ A part of Angular Labs set.
▸ Angular elements are Angular components
packaged as Custom Elements.

ANGULAR ELEMENTS
▸ Angular’s createCustomElement() function transforms an Angular component,
together with its dependencies, to a class that is conﬁgured to produce a self-
bootstrapping instance of the component.
▸ It transforms the property names to make them compatible with custom
elements.
▸ Component outputs are dispatched as HTML Custom Events, with the name
of the custom event matching the output name.
▸ Then customElements.deﬁne() is used to register our custom element.
Transformation

NEW ANGULAR PROJECT
ng new angular-elements // Create new Angular CLI project
cd angular-elements
ng add @angular/elements // Add angular elements package
ng g c counter // Generate a new component
// Navigate to our new project

ANGULAR ELEMENTS The generated component
@Component({
selector: 'app-counter',
templateUrl: './counter.component.html',
styleUrls: ['./counter.component.css'],
encapsulation: ViewEncapsulation.Native
})
export class CounterComponent {
@Input() counter = 0;
constructor() { }
inc() { this.counter++; }
dec() { this.counter--; }
}
src/app/counter/counter.component.ts

ANGULAR ELEMENTS Add View Encapsulation via Shadow DOM (Native)
@Component({
})
constructor() { }
}

ANGULAR ELEMENTS Create a counter input property
@Component({
})
constructor() { }
}

ANGULAR ELEMENTS Create counter handlers
@Component({
})
constructor() { }
}

ANGULAR ELEMENTS Present the counter value
<div>{{counter}}</div>
<button (click)="dec()">Dec</button>
<button (click)="inc()">Inc</button>
src/app/counter/counter.component.html

ANGULAR ELEMENTS Create the manipulation buttons and connect the to the handlers
<div>{{counter}}</div>
<button (click)="dec()">Dec</button>
<button (click)="inc()">Inc</button>
src/app/counter/counter.component.html

NEW ANGULAR MODULE
ng g m counter // Create new counter module

ANGULAR ELEMENTS Create a module for out custom elements
@NgModule({
imports: [
BrowserModule
],
declarations: [],
entryComponents: [CounterComponent]
})
export class CounterModule {
constructor(private injector: Injector) {}
ngDoBootstrap() {
const el = createCustomElement(CounterComponent, { injector: this.injector });
customElements.define('app-counter', el);
}
}
src/app/counter/counter.module.ts

ANGULAR ELEMENTS Create a module for out custom elements
@NgModule({
imports: [
BrowserModule
],
declarations: [CounterComponent],
entryComponents: [CounterComponent]
})
export class CounterModule {
constructor(private injector: Injector) {}
ngDoBootstrap() {
const el = createCustomElement(CounterComponent, { injector: this.injector });
customElements.define('app-counter', el);
}
}
src/app/counter/counter.module.ts

IVY - THE NEW RENDERING ENGINE FOR ANGULAR
▸ Monomorphic (Fast) - All internal data structures are monomorphic.
▸ Tree Shaking (Efﬁcient) - removing unused pieces of code from our
applications.
https://github.com/angular/angular/blob/master/packages/compiler/design/architecture.md

ANGULAR ELEMENTS Using the Ivy hopefully we will have something like:
@Component({
customElement: true
})
constructor() { }
}

FAQ
▸ Can we use Dependency Injection?
▸ What about Content Projection?
▸ Can we still use Slots?

BENEFITS OF USING ANGULAR ELEMENTS
▸ All components can be reused across JavaScript applications.
▸ Creating Dynamic Components.
▸ Hybrid Rendering - Server Side Rendering with Custom Elements that don’t
wait for the application to bootstrap to start working.
▸ Micro Frontends Architecture - Vertical Application Scaling (Working with
multiple small applications instead of a big monolith.)
https://micro-frontends.org

ADDITIONAL RESOURCES
▸ https://custom-elements-everywhere.com - This project runs a suite of tests
against each framework to identify interoperability issues, and highlight
potential ﬁxes already implemented in other frameworks.

CONNECT
GitHub > https://github.com/iliaidakiev (/slides/ - list of future and past events)
Twitter > @ilia_idakiev

Building Reusable Custom Elements With Angular

Recommended

More Related Content

What's hot (20)

Similar to Building Reusable Custom Elements With Angular (20)

More from Ilia Idakiev (17)

Recently uploaded (20)

Building Reusable Custom Elements With Angular