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

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

BUILDING REUSABLE CUSTOM ELEMENTS USING ANGULAR 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/

BUILDING REUSABLE CUSTOM ELEMENTS USING ANGULAR 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.

BUILDING REUSABLE CUSTOM ELEMENTS USING ANGULAR 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.

BUILDING REUSABLE CUSTOM ELEMENTS USING ANGULAR 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).

BUILDING REUSABLE CUSTOM ELEMENTS USING ANGULAR 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

BUILDING REUSABLE CUSTOM ELEMENTS USING ANGULAR (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); }()); DEFINE CUSTOM ELEMENT Create a new class that extends HTMLElement counter.js

BUILDING REUSABLE CUSTOM ELEMENTS USING ANGULAR (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); }()); DEFINE CUSTOM ELEMENT Register the new custom element. counter.js

BUILDING REUSABLE CUSTOM ELEMENTS USING ANGULAR 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.

BUILDING REUSABLE CUSTOM ELEMENTS USING ANGULAR 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

BUILDING REUSABLE CUSTOM ELEMENTS USING ANGULAR CREATE TEMPLATE HELPER FUNCTION function createTemplate(string) { const template = document.createElement('template'); template.innerHTML = string; return template; } utils.js

BUILDING REUSABLE CUSTOM ELEMENTS USING ANGULAR CREATE THE TEMPLATE (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); }()); Use the create template helper function. counter.js

BUILDING REUSABLE CUSTOM ELEMENTS USING ANGULAR 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).

BUILDING REUSABLE CUSTOM ELEMENTS USING ANGULAR 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); }()); counter.js Utilise the class constructor.

BUILDING REUSABLE CUSTOM ELEMENTS USING ANGULAR ATTACH SHADOW DOM (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); }()); Attach the shadow DOM. counter.js

BUILDING REUSABLE CUSTOM ELEMENTS USING ANGULAR (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 THE TEMPLATE Attach the template contents to the shadow root. counter.js

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

BUILDING REUSABLE CUSTOM ELEMENTS USING ANGULAR EXTEND OUR CUSTOM ELEMENT index.html (function () { const template = createTemplate(` <div name="value"></div> <button data-type=“dec">-</button> <button data-type="inc">+</button> `); class Counter extends HTMLElement { constructor() { super();

BUILDING REUSABLE CUSTOM ELEMENTS USING ANGULAR EXTEND OUR CUSTOM ELEMENT index.html constructor() { super(); const shadowRoot = this.attachShadow({ mode: 'open' }); shadowRoot.appendChild(template.content.cloneNode(true)); shadowRoot.addEventListener('click', ({ target }) => { const type = target.getAttribute('data-type'); if (type === 'dec') { this.counter--; } else if (type === 'inc') { this.counter++; } });

BUILDING REUSABLE CUSTOM ELEMENTS USING ANGULAR EXTEND OUR CUSTOM ELEMENT index.html class Counter extends HTMLElement { set counter(value) { this._counter = value; } get counter() { return this._counter; } constructor() { super(); const shadowRoot = this.attachShadow({ mode: 'open' }); shadowRoot.appendChild(template.content.cloneNode(true)); this.counter = 0;

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

BUILDING REUSABLE CUSTOM ELEMENTS USING ANGULAR EXTEND OUR CUSTOM ELEMENT index.html class Counter extends HTMLElement { constructor() { super(); const shadowRoot = this.attachShadow({ mode: 'open' }); shadowRoot.appendChild(template.content.cloneNode(true)); this.counter = 0; this._update = () => { updateDOM(shadowRoot, [{ name: 'value', value: this.counter }]); }

BUILDING REUSABLE CUSTOM ELEMENTS USING ANGULAR EXTEND OUR CUSTOM ELEMENT index.html class Counter extends HTMLElement { set counter(value) { this._counter = value; this._update(); } get counter() { return this._counter; } constructor() { super(); const shadowRoot = this.attachShadow({ mode: 'open' }); shadowRoot.appendChild(template.content.cloneNode(true)); this.counter = 0;

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

BUILDING REUSABLE CUSTOM ELEMENTS USING ANGULAR 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.

BUILDING REUSABLE CUSTOM ELEMENTS USING ANGULAR CUSTOM COMPONENT ATTRIBUTES index.html class Counter extends HTMLElement { static get observedAttributes() { return ['value']; } attributeChangedCallback(name, oldValue, newValue) { if (name === 'value') { this.counter = newValue; } } constructor() { Handle attribute changes

BUILDING REUSABLE CUSTOM ELEMENTS USING ANGULAR CUSTOM COMPONENT ATTRIBUTES index.html class Counter extends HTMLElement { static get observedAttributes() { return ['value']; } attributeChangedCallback(name, oldValue, newValue) { if (name === 'value') { this.counter = newValue; } } constructor() { Deﬁne which attributes should be watched

BUILDING REUSABLE CUSTOM ELEMENTS USING ANGULAR 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> `); class Counter extends HTMLElement {

BUILDING REUSABLE CUSTOM ELEMENTS USING ANGULAR FURTHER READING ▸ Extending different HTML Elements  (e.g. HTMLButton) ▸ Dispatching Custom Events

BUILDING REUSABLE CUSTOM ELEMENTS USING ANGULAR 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.

BUILDING REUSABLE CUSTOM ELEMENTS USING ANGULAR BROWSER SUPPORT

BUILDING REUSABLE CUSTOM ELEMENTS USING ANGULAR 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)

BUILDING REUSABLE CUSTOM ELEMENTS USING ANGULAR 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.

BUILDING REUSABLE CUSTOM ELEMENTS USING ANGULAR 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

BUILDING REUSABLE CUSTOM ELEMENTS USING ANGULAR 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.

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

BUILDING REUSABLE CUSTOM ELEMENTS USING ANGULAR 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

BUILDING REUSABLE CUSTOM ELEMENTS USING ANGULAR 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

BUILDING REUSABLE CUSTOM ELEMENTS USING ANGULAR 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

BUILDING REUSABLE CUSTOM ELEMENTS USING ANGULAR ANGULAR ELEMENTS Add View Encapsulation via Shadow DOM (Native) @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

BUILDING REUSABLE CUSTOM ELEMENTS USING ANGULAR ANGULAR ELEMENTS Create a counter input property @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

BUILDING REUSABLE CUSTOM ELEMENTS USING ANGULAR ANGULAR ELEMENTS Create counter handlers @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

BUILDING REUSABLE CUSTOM ELEMENTS USING ANGULAR 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

BUILDING REUSABLE CUSTOM ELEMENTS USING ANGULAR 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

BUILDING REUSABLE CUSTOM ELEMENTS USING ANGULAR NEW ANGULAR MODULE ng g m counter // Create new counter module

BUILDING REUSABLE CUSTOM ELEMENTS USING ANGULAR 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

BUILDING REUSABLE CUSTOM ELEMENTS USING ANGULAR 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

BUILDING REUSABLE CUSTOM ELEMENTS USING ANGULAR 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

BUILDING REUSABLE CUSTOM ELEMENTS USING ANGULAR ANGULAR ELEMENTS Using the Ivy hopefully we will have something like: @Component({ selector: 'app-counter', templateUrl: './counter.component.html', styleUrls: ['./counter.component.css'], customElement: true }) export class CounterComponent { @Input() counter = 0; constructor() { } inc() { this.counter++; } dec() { this.counter--; } } src/app/counter/counter.component.ts

BUILDING REUSABLE CUSTOM ELEMENTS USING ANGULAR FAQ ▸ Can we use Dependency Injection? ▸ What about Content Projection? ▸ Can we still use Slots?

BUILDING REUSABLE CUSTOM ELEMENTS USING ANGULAR 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

BUILDING REUSABLE CUSTOM ELEMENTS USING ANGULAR 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.

BUILDING REUSABLE CUSTOM ELEMENTS USING ANGULAR CONNECT GitHub > https://github.com/iliaidakiev (/slides/ - list of future and past events) Twitter > @ilia_idakiev

Building Reusable Custom Elements With Angular

More Related Content

What's hot

Similar to Building Reusable Custom Elements With Angular

More from Ilia Idakiev

Recently uploaded

Building Reusable Custom Elements With Angular