SlideShare a Scribd company logo

Creating lightweight JS Apps w/ Web Components and lit-html

Ilia Idakiev
Ilia Idakiev

This document outlines the creation of lightweight JavaScript applications using web components and lit-html, covering key concepts such as the separation of concerns, the SOLID principles, and various features of web components including custom elements, shadow DOM, and HTML templates. It also discusses the process of defining custom elements, managing DOM updates, and lifecycle callbacks, alongside the benefits and challenges of using custom components. Lastly, it introduces the lit-html library for efficient template generation and demonstrates its use with examples of applying templates in custom elements.

Technology
1 of 99
Downloaded 13 times
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
CREATING LIGHTWEIGHT JS APPS W/ WEB COMPONENTS AND LIT-HTML 🔥-HTML+
A B O U T M E { "name": "Ilia Idakiev", "experience": [ “Google Developer Expert (GDE)“, "Developer & Co-founder @ HILLGRAND", "Lecturer in 'Advanced JS' @ Sofia University", "Contractor / Consultant", "Public / Private Courses” ], "involvedIn": [ "Angular Sofia", "SofiaJS / BeerJS", ] }
CREATING LIGHTWEIGHT JS APPS W/ WEB COMPONENTS AND LIT-HTML SEPARATION OF CONCERNS (SOC) ▸ Design principle for separating a computer program into distinct sections, such that each section addresses a separate concern. (Modularity)
CREATING LIGHTWEIGHT JS APPS W/ WEB COMPONENTS AND LIT-HTML 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/
CREATING LIGHTWEIGHT JS APPS W/ WEB COMPONENTS AND LIT-HTML 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 specifications 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.
CREATING LIGHTWEIGHT JS APPS W/ WEB COMPONENTS AND LIT-HTML 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 define new HTML elements. ▸ HTML Imports - Declarative methods of importing HTML documents into other documents. (Replaced by ES6 Imports).
DEMOTHE NATIVE WAY
CREATING LIGHTWEIGHT JS APPS W/ WEB COMPONENTS AND LIT-HTML DEFINE CUSTOM ELEMENT (function () { }()); Create an isolated scope counter.js
CREATING LIGHTWEIGHT JS APPS W/ WEB COMPONENTS AND LIT-HTML (function () { class Counter extends HTMLElement { } }()); DEFINE CUSTOM ELEMENT Create a new class that extends HTMLElement counter.js
CREATING LIGHTWEIGHT JS APPS W/ WEB COMPONENTS AND LIT-HTML (function () { class Counter extends HTMLElement { } customElements.define('hg-counter', Counter); }()); DEFINE CUSTOM ELEMENT Register the new custom element. counter.js
CREATING LIGHTWEIGHT JS APPS W/ WEB COMPONENTS AND LIT-HTML 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.
CREATING LIGHTWEIGHT JS APPS W/ WEB COMPONENTS AND LIT-HTML 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
CREATING LIGHTWEIGHT JS APPS W/ WEB COMPONENTS AND LIT-HTML CREATE TEMPLATE HELPER FUNCTION function createTemplate(string) { const template = document.createElement('template'); template.innerHTML = string; return template; } utils.js
CREATING LIGHTWEIGHT JS APPS W/ WEB COMPONENTS AND LIT-HTML CREATE THE TEMPLATE (function () { const template = createTemplate('<div>Hello World<div>'); class Counter extends HTMLElement { } customElements.define('hg-counter', Counter); }()); Use the create template helper function. counter.js
CREATING LIGHTWEIGHT JS APPS W/ WEB COMPONENTS AND LIT-HTML 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 defined 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 fill with their own markup).
CREATING LIGHTWEIGHT JS APPS W/ WEB COMPONENTS AND LIT-HTML DEFINE CUSTOM ELEMENT (function () { const template = createTemplate('<div>Hello World<div>'); class Counter extends HTMLElement { constructor() { super(); } } customElements.define('hg-counter', Counter); }()); counter.js Utilise the class constructor.
CREATING LIGHTWEIGHT JS APPS W/ WEB COMPONENTS AND LIT-HTML ATTACH SHADOW DOM (function () { const template = createTemplate('<div>Hello World<div>'); class Counter extends HTMLElement { constructor() { super(); const shadowRoot = this.attachShadow({ mode: 'open' }); } } customElements.define('hg-counter', Counter); }()); Attach the shadow DOM. counter.js
CREATING LIGHTWEIGHT JS APPS W/ WEB COMPONENTS AND LIT-HTML (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
CREATING LIGHTWEIGHT JS APPS W/ WEB COMPONENTS AND LIT-HTML USE OUR CUSTOM ELEMENT <body> <hg-counter></hg-counter> <script src="./util.js"></script> <script src="./counter.js"></script> </body> index.html
CREATING LIGHTWEIGHT JS APPS W/ WEB COMPONENTS AND LIT-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> `); class Counter extends HTMLElement { constructor() { super();
CREATING LIGHTWEIGHT JS APPS W/ WEB COMPONENTS AND LIT-HTML 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++; } });
CREATING LIGHTWEIGHT JS APPS W/ WEB COMPONENTS AND LIT-HTML UPDATING THE DOM utils.js function updateDOM(root, updates) { updates.forEach(item => { root.querySelectorAll(`[name=${item.name}]`).forEach(element => element.textContent = item.value ); }); }
CREATING LIGHTWEIGHT JS APPS W/ WEB COMPONENTS AND LIT-HTML 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;
CREATING LIGHTWEIGHT JS APPS W/ WEB COMPONENTS AND LIT-HTML 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 }]); }
CREATING LIGHTWEIGHT JS APPS W/ WEB COMPONENTS AND LIT-HTML 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;
CREATING LIGHTWEIGHT JS APPS W/ WEB COMPONENTS AND LIT-HTML CUSTOM COMPONENT ATTRIBUTES index.html <body> <hg-counter value="10"></hg-counter> <script src="./util.js"></script> <script src="./counter.js"></script> </body>
CREATING LIGHTWEIGHT JS APPS W/ WEB COMPONENTS AND LIT-HTML 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.
CREATING LIGHTWEIGHT JS APPS W/ WEB COMPONENTS AND LIT-HTML CUSTOM COMPONENT ATTRIBUTES index.html class Counter extends HTMLElement { attributeChangedCallback(name, oldValue, newValue) { if (name === 'value') { this.counter = newValue; } } constructor() { Handle attribute changes
CREATING LIGHTWEIGHT JS APPS W/ WEB COMPONENTS AND LIT-HTML 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() { Define which attributes should be watched
WHAT ABOUT STYLES?
CREATING LIGHTWEIGHT JS APPS W/ WEB COMPONENTS AND LIT-HTML 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 {
CREATING LIGHTWEIGHT JS APPS W/ WEB COMPONENTS AND LIT-HTML WEB COMPONENT CSS ▸ :host - selects the shadow host of the shadow DOM ▸ :host() - match only if the selector given as the function's parameter matches the shadow host. ▸ :host-context() -  match only if the selector given as the function's parameter matches the shadow host's ancestor(s) in the place it sits inside the DOM hierarchy. ▸ ::slotted() - represents any element that has been placed into a slot inside an HTML template
WHAT ABOUT DISPATCHING EVENTS?
CREATING LIGHTWEIGHT JS APPS W/ WEB COMPONENTS AND LIT-HTML CUSTOM EVENTS Dispatching custom event const test = shadowRoot.getElementById('element-button'); test.addEventListener('click', () => { this.dispatchEvent(new CustomEvent('toggle', { detail: { value: true } })) }); custom-element.js
CREATING LIGHTWEIGHT JS APPS W/ WEB COMPONENTS AND LIT-HTML CUSTOM EVENTS Listening for custom event • CustomEvent {isTrusted: false, detail: {value: true}, type: "toggle", …} const el = document.getElementById('my-custom-element'); el.addEventListener('toggle', e => { console.log(e); }); main.js Console
CREATING LIGHTWEIGHT JS APPS W/ WEB COMPONENTS AND LIT-HTML FURTHER READING ▸ Extending different HTML Elements
 (e.g. HTMLButton)
CREATING LIGHTWEIGHT JS APPS W/ WEB COMPONENTS AND LIT-HTML BENEFITS OF USING CUSTOM COMPONENTS ▸ Framework agnostic - Written in JavaScript and native to the browser. ▸ Simplifies CSS - Scoped DOM means you can use simple CSS selectors, more generic id/class names, and not worry about naming conflicts. • 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.
CREATING LIGHTWEIGHT JS APPS W/ WEB COMPONENTS AND LIT-HTML BROWSER SUPPORT
CREATING LIGHTWEIGHT JS APPS W/ WEB COMPONENTS AND LIT-HTML 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)
CREATING LIGHTWEIGHT JS APPS W/ WEB COMPONENTS AND LIT-HTML LIT HTML ▸ Library Developed by the Polymer Team @ GOOGLE ▸ Efficient - 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.
TAG FUNCTIONS
CREATING LIGHTWEIGHT JS APPS W/ WEB COMPONENTS AND LIT-HTML TAG FUNCTIONS function myTagFn(str, ...expr) { console.log(str, expr); return str.reduce((acc, curr, i) => acc + curr + (expr[i] || ''), ''); } myTagFn`1+1 equals ${1+1} and 3 + 3 equals ${3+3} ${3+2}` > (4) ["1+1 equals ", " and 3 + 3 equals ", " ", ""] (3) [2, 6, 5] > “1+1 equals 2 and 3 + 3 equals 6 5" Console
DEMOTHE LIT WAY
CREATING LIGHTWEIGHT JS APPS W/ WEB COMPONENTS AND LIT-HTML import { html, render } from 'lit-html'; const getTemplate = (context: App) => html`<div>Hello World!</div>`; export class App extends HTMLElement { constructor() { super(); const root = this.attachShadow({ mode: 'closed' }); this.changeHandler = () => { if (!this.scheduledRender) { this.scheduledRender = true; Promise.resolve().then(() => { this.scheduledRender = false; render(getTemplate(this), root); }); } } } connectedCallback() { this.changeHandler(); } } customElements.define('hg-app', App);
CREATING LIGHTWEIGHT JS APPS W/ WEB COMPONENTS AND LIT-HTML import { html, render } from 'lit-html'; const getTemplate = (context: App) => html`<div>Hello World!</div>`; export class App extends HTMLElement { constructor() { super(); const root = this.attachShadow({ mode: 'closed' }); this.changeHandler = () => { if (!this.scheduledRender) { this.scheduledRender = true; Promise.resolve().then(() => { this.scheduledRender = false; render(getTemplate(this), root); }); } } } connectedCallback() { this.changeHandler(); } } customElements.define('hg-app', App);
CREATING LIGHTWEIGHT JS APPS W/ WEB COMPONENTS AND LIT-HTML import { html, render } from 'lit-html'; const getTemplate = (context: App) => html`<div>Hello World!</div>`; export class App extends HTMLElement { constructor() { super(); const root = this.attachShadow({ mode: 'closed' }); this.changeHandler = () => { if (!this.scheduledRender) { this.scheduledRender = true; Promise.resolve().then(() => { this.scheduledRender = false; render(getTemplate(this), root); }); } } } connectedCallback() { this.changeHandler(); } } customElements.define('hg-app', App);
CREATING LIGHTWEIGHT JS APPS W/ WEB COMPONENTS AND LIT-HTML import { html, render } from 'lit-html'; const getTemplate = (context: App) => html`<div>Hello World!</div>`; export class App extends HTMLElement { constructor() { super(); const root = this.attachShadow({ mode: 'closed' }); this.changeHandler = () => { if (!this.scheduledRender) { this.scheduledRender = true; Promise.resolve().then(() => { this.scheduledRender = false; render(getTemplate(this), root); }); } } } connectedCallback() { this.changeHandler(); } } customElements.define('hg-app', App);
CREATING LIGHTWEIGHT JS APPS W/ WEB COMPONENTS AND LIT-HTML import { html, render } from 'lit-html'; const getTemplate = (context: App) => html`<div>Hello World!</div>`; export class App extends HTMLElement { constructor() { super(); const root = this.attachShadow({ mode: 'closed' }); this.changeHandler = () => { if (!this.scheduledRender) { this.scheduledRender = true; Promise.resolve().then(() => { this.scheduledRender = false; render(getTemplate(this), root); }); } } } connectedCallback() { this.changeHandler(); } } customElements.define('hg-app', App);
CREATING LIGHTWEIGHT JS APPS W/ WEB COMPONENTS AND LIT-HTML import { html, render } from 'lit-html'; const getTemplate = (context: App) => html`<div>Hello World!</div>`; export class App extends HTMLElement { constructor() { super(); const root = this.attachShadow({ mode: 'closed' }); this.changeHandler = () => { if (!this.scheduledRender) { this.scheduledRender = true; Promise.resolve().then(() => { this.scheduledRender = false; render(getTemplate(this), root); }); } } } connectedCallback() { this.changeHandler(); } } customElements.define('hg-app', App);
CREATING LIGHTWEIGHT JS APPS W/ WEB COMPONENTS AND LIT-HTML import { html, render } from 'lit-html'; const getTemplate = (context: App) => html`<div>Hello World!</div>`; export class App extends HTMLElement { constructor() { super(); const root = this.attachShadow({ mode: 'closed' }); this.changeHandler = () => { if (!this.scheduledRender) { this.scheduledRender = true; Promise.resolve().then(() => { this.scheduledRender = false; render(getTemplate(this), root); }); } } } connectedCallback() { this.changeHandler(); } } customElements.define('hg-app', App);
CREATING LIGHTWEIGHT JS APPS W/ WEB COMPONENTS AND LIT-HTML import { html, render } from 'lit-html'; const getTemplate = (context: App) => html`<div>Hello World!</div>`; export class App extends HTMLElement { constructor() { super(); const root = this.attachShadow({ mode: 'closed' }); this.changeHandler = () => { if (!this.scheduledRender) { this.scheduledRender = true; Promise.resolve().then(() => { this.scheduledRender = false; render(getTemplate(this), root); }); } } } connectedCallback() { this.changeHandler(); } } customElements.define('hg-app', App);
CREATING LIGHTWEIGHT JS APPS W/ WEB COMPONENTS AND LIT-HTML import { html, render } from 'lit-html'; const getTemplate = (context: App) => html`<div>Hello World!</div>`; export class App extends HTMLElement { constructor() { super(); const root = this.attachShadow({ mode: 'closed' }); this.changeHandler = () => { if (!this.scheduledRender) { this.scheduledRender = true; Promise.resolve().then(() => { this.scheduledRender = false; render(getTemplate(this), root); }); } } } connectedCallback() { this.changeHandler(); } } customElements.define('hg-app', App);
CREATING LIGHTWEIGHT JS APPS W/ WEB COMPONENTS AND LIT-HTML import { html, render } from 'lit-html'; const getTemplate = (context: App) => html`<div>Hello World!</div>`; export class App extends HTMLElement { constructor() { super(); const root = this.attachShadow({ mode: 'closed' }); this.changeHandler = () => { if (!this.scheduledRender) { this.scheduledRender = true; Promise.resolve().then(() => { this.scheduledRender = false; render(getTemplate(this), root); }); } } } connectedCallback() { this.changeHandler(); } } customElements.define('hg-app', App);
CREATING LIGHTWEIGHT JS APPS W/ WEB COMPONENTS AND LIT-HTML import { html, render } from 'lit-html'; const getTemplate = (context: App) => html`<div>Hello World!</div>`; export class App extends HTMLElement { constructor() { super(); const root = this.attachShadow({ mode: 'closed' }); this.changeHandler = () => { if (!this.scheduledRender) { this.scheduledRender = true; Promise.resolve().then(() => { this.scheduledRender = false; render(getTemplate(this), root); }); } } } connectedCallback() { this.changeHandler(); } } customElements.define('hg-app', App);
CREATING LIGHTWEIGHT JS APPS W/ WEB COMPONENTS AND LIT-HTML import { html, render } from 'lit-html'; const getTemplate = (context: App) => html`<div>Hello World!</div>`; export class App extends HTMLElement { constructor() { super(); const root = this.attachShadow({ mode: 'closed' }); this.changeHandler = () => { if (!this.scheduledRender) { this.scheduledRender = true; Promise.resolve().then(() => { this.scheduledRender = false; render(getTemplate(this), root); }); } } } connectedCallback() { this.changeHandler(); } } customElements.define('hg-app', App);
DEMOINTERPOLATION & EVENT HANDLER BINDING
CREATING LIGHTWEIGHT JS APPS W/ WEB COMPONENTS AND LIT-HTML const getTemplate = (context: App) => html` <div>${context.counter}</div> <button @click=${context.incrementHandler}>Increment</button> `; export class App extends HTMLElement { counter = 0; constructor() { ... } incrementHandler = () => { this.counter++; this.changeHandler(); } } customElements.define('hg-app', App);
CREATING LIGHTWEIGHT JS APPS W/ WEB COMPONENTS AND LIT-HTML const getTemplate = (context: App) => html` <div>${context.counter}</div> <button @click=${context.incrementHandler}>Increment</button> `; export class App extends HTMLElement { counter = 0; constructor() { ... } incrementHandler = () => { this.counter++; this.changeHandler(); } } customElements.define('hg-app', App);
CREATING LIGHTWEIGHT JS APPS W/ WEB COMPONENTS AND LIT-HTML const getTemplate = (context: App) => html` <div>${context.counter}</div> <button @click=${context.incrementHandler}>Increment</button> `; export class App extends HTMLElement { counter = 0; constructor() { ... } incrementHandler = () => { this.counter++; this.changeHandler(); } } customElements.define('hg-app', App);
CREATING LIGHTWEIGHT JS APPS W/ WEB COMPONENTS AND LIT-HTML const getTemplate = (context: App) => html` <div>${context.counter}</div> <button @click=${context.incrementHandler}>Increment</button> `; export class App extends HTMLElement { counter = 0; constructor() { ... } incrementHandler = () => { this.counter++; this.changeHandler(); } } customElements.define('hg-app', App);
CREATING LIGHTWEIGHT JS APPS W/ WEB COMPONENTS AND LIT-HTML const getTemplate = (context: App) => html` <div>${context.counter}</div> <button @click=${context.incrementHandler}>Increment</button> `; export class App extends HTMLElement { counter = 0; constructor() { ... } incrementHandler = () => { this.counter++; this.changeHandler(); } } customElements.define('hg-app', App);
CREATING LIGHTWEIGHT JS APPS W/ WEB COMPONENTS AND LIT-HTML const getTemplate = (context: App) => html` <div>${context.counter}</div> <button @click=${context.incrementHandler}>Increment</button> `; export class App extends HTMLElement { counter = 0; constructor() { ... } incrementHandler = () => { this.counter++; this.changeHandler(); } } customElements.define('hg-app', App);
CREATING LIGHTWEIGHT JS APPS W/ WEB COMPONENTS AND LIT-HTML const getTemplate = (context: App) => html` <div>${context.counter}</div> <button @click=${context.incrementHandler}>Increment</button> `; export class App extends HTMLElement { counter = 0; constructor() { ... } incrementHandler = () => { this.counter++; this.changeHandler(); } } customElements.define('hg-app', App);
CREATING LIGHTWEIGHT JS APPS W/ WEB COMPONENTS AND LIT-HTML const getTemplate = (context: App) => html` <div>${context.counter}</div> <button @click=${context.incrementHandler}>Increment</button> `; export class App extends HTMLElement { counter = 0; constructor() { ... } incrementHandler = () => { this.counter++; this.changeHandler(); } } customElements.define('hg-app', App);
CREATING LIGHTWEIGHT JS APPS W/ WEB COMPONENTS AND LIT-HTML const getTemplate = (context: App) => html` <div>${context.counter}</div> <button @click=${context.incrementHandler}>Increment</button> `; export class App extends HTMLElement { counter = 0; constructor() { ... } incrementHandler = () => { this.counter++; this.changeHandler(); } } customElements.define('hg-app', App);
CREATING LIGHTWEIGHT JS APPS W/ WEB COMPONENTS AND LIT-HTML const getTemplate = (context: App) => html` <div>${context.counter}</div> <button @click=${context.incrementHandler}>Increment</button> `; export class App extends HTMLElement { counter = 0; constructor() { ... } incrementHandler = () => { this.counter++; this.changeHandler(); } } customElements.define('hg-app', App);
DEMODATA BINDING
CREATING LIGHTWEIGHT JS APPS W/ WEB COMPONENTS AND LIT-HTML const getAppTemplate = (context: App) => html` <hg-counter .value=${context.counter}></hg-counter> <button @click=${context.incrementHandler}>Increment</button> `;
CREATING LIGHTWEIGHT JS APPS W/ WEB COMPONENTS AND LIT-HTML const getAppTemplate = (context: App) => html` <hg-counter .value=${context.counter}></hg-counter> <button @click=${context.incrementHandler}>Increment</button> `;
CREATING LIGHTWEIGHT JS APPS W/ WEB COMPONENTS AND LIT-HTML const getAppTemplate = (context: App) => html` <hg-counter .value=${context.counter}></hg-counter> <button @click=${context.incrementHandler}>Increment</button> `;
CREATING LIGHTWEIGHT JS APPS W/ WEB COMPONENTS AND LIT-HTML const getAppTemplate = (context: App) => html` <hg-counter .value=${context.counter}></hg-counter> <button @click=${context.incrementHandler}>Increment</button> `;
CREATING LIGHTWEIGHT JS APPS W/ WEB COMPONENTS AND LIT-HTML const getCounterTemplate = (context: Counter) => html` <div>${context.value}</div> `; export class Counter extends HTMLElement { _value = 0; set value(value) { this._value = value; this.changeHandler(); } get value() { return this._value; } constructor() { super(); const root = this.attachShadow({ mode: 'closed' }); } }
CREATING LIGHTWEIGHT JS APPS W/ WEB COMPONENTS AND LIT-HTML const getCounterTemplate = (context: Counter) => html` <div>${context.value}</div> `; export class Counter extends HTMLElement { _value = 0; set value(value) { this._value = value; this.changeHandler(); } get value() { return this._value; } constructor() { super(); const root = this.attachShadow({ mode: 'closed' }); } }
CREATING LIGHTWEIGHT JS APPS W/ WEB COMPONENTS AND LIT-HTML const getCounterTemplate = (context: Counter) => html` <div>${context.value}</div> `; export class Counter extends HTMLElement { _value = 0; set value(value) { this._value = value; this.changeHandler(); } get value() { return this._value; } constructor() { super(); const root = this.attachShadow({ mode: 'closed' }); } }
CREATING LIGHTWEIGHT JS APPS W/ WEB COMPONENTS AND LIT-HTML const getCounterTemplate = (context: Counter) => html` <div>${context.value}</div> `; export class Counter extends HTMLElement { _value = 0; set value(value) { this._value = value; this.changeHandler(); } get value() { return this._value; } constructor() { super(); const root = this.attachShadow({ mode: 'closed' }); } }
CREATING LIGHTWEIGHT JS APPS W/ WEB COMPONENTS AND LIT-HTML const getCounterTemplate = (context: Counter) => html` <div>${context.value}</div> `; export class Counter extends HTMLElement { _value = 0; set value(value) { this._value = value; this.changeHandler(); } get value() { return this._value; } constructor() { super(); const root = this.attachShadow({ mode: 'closed' }); } }
CREATING LIGHTWEIGHT JS APPS W/ WEB COMPONENTS AND LIT-HTML const getCounterTemplate = (context: Counter) => html` <div>${context.value}</div> `; export class Counter extends HTMLElement { _value = 0; set value(value) { this._value = value; this.changeHandler(); } get value() { return this._value; } constructor() { super(); const root = this.attachShadow({ mode: 'closed' }); ... } }
CAN WE EXTRACT THE REPEATING PARTS?
DEMODECORATORS
export function Component(config: { mode?: 'open' | 'closed', selector: string }) { return function componentDecorator(target) { const cmp = class extends HTMLElement { scheduledRender = false; constructor(...args) { super(); const root = this.attachShadow({ mode: config.mode || 'closed' }); const targetInstance = new target(...args); const { constructor, ...prototypeProps } = Object.getOwnPropertyDescriptors(target.prototype); const props = { ...Object.getOwnPropertyDescriptors(targetInstance), ...prototypeProps } Object.defineProperties(this, props); this.changeHandler = function () { if (!this.scheduledRender) { this.scheduledRender = true; Promise.resolve().then(() => { this.scheduledRender = false; if (!this.render) { return; } render(this.render(), root); }); } } return this; } connectedCallback() { this.changeHandler(); if (this.onConnected) { this.onConnected(); } } }; customElements.define(config.selector, cmp); return cmp as any; }; }
function property(target: any, propertyKey: string | symbol) { let _value; Object.defineProperty(target, propertyKey, { set: function (value) { _value = value; if (!this.changeHandler) { return; } this.changeHandler(); }, get: function () { return _value; } }) }
CREATING LIGHTWEIGHT JS APPS W/ WEB COMPONENTS AND LIT-HTML @Component({ selector: 'hg-counter' }) export class Counter { @property value; onConnected() { console.log('Counter connected'); } render() { return html` <div>${this.value}</div> `; } }
CREATING LIGHTWEIGHT JS APPS W/ WEB COMPONENTS AND LIT-HTML LIT ELEMENT ▸ A simple base class for creating fast, lightweight web components https://lit-element.polymer-project.org/
DEMODIRECTIVES
CREATING LIGHTWEIGHT JS APPS W/ WEB COMPONENTS AND LIT-HTML LIT HTML DIRECTIVES (1) ▸ Directives are functions that can customize how lit-html renders values. Template authors can use directives in their templates like other functions
CREATING LIGHTWEIGHT JS APPS W/ WEB COMPONENTS AND LIT-HTML LIT HTML DIRECTIVES (2) ▸ The returned function is called each time the part is rendered. The part argument is a Part object with an API for directly managing the dynamic DOM associated with expressions. Each type of binding has its own specific Part object: ▸ NodePart for content bindings. ▸ AttributePart for standard attribute bindings. ▸ BooleanAttributePart for boolean attribute bindings. ▸ EventPart for event bindings. ▸ PropertyPart for property bindings.
CREATING LIGHTWEIGHT JS APPS W/ WEB COMPONENTS AND LIT-HTML LIT HTML DIRECTIVES (3) ▸ Each of these part types implement a common API: ▸ value. Holds the current value of the part. ▸ setValue. Sets the pending value of the part. ▸ commit. Writes the pending value to the DOM. In most cases this happens automatically—this method is only required for advanced use cases, like asynchronous directives.
ASYNCHRONOUS DIRECTIVES?
CREATING LIGHTWEIGHT JS APPS W/ WEB COMPONENTS AND LIT-HTML
CREATING LIGHTWEIGHT JS APPS W/ WEB COMPONENTS AND LIT-HTML
CREATING LIGHTWEIGHT JS APPS W/ WEB COMPONENTS AND LIT-HTML LIT HTML UNTIL BUILT-IN DIRECTIVE
CREATING LIGHTWEIGHT JS APPS W/ WEB COMPONENTS AND LIT-HTML LIT HTML BUILT-IN DIRECTIVES ▸ asyncAppend and asyncReplace ▸ cache ▸ classMap ▸ ifDefined ▸ guard ▸ repeat ▸ styleMap ▸ unsafeHTML ▸ until
CREATING LIGHTWEIGHT JS APPS W/ WEB COMPONENTS AND LIT-HTML LIT-HTML & HTML/CSS ▸ Dynamic css class/id and property names ▸ Dynamic css property values ▸ Sharing styles and HTML between the isolated web components (mixins)
CREATING LIGHTWEIGHT JS APPS W/ WEB COMPONENTS AND LIT-HTML WEB COMPONENTS + LIT-HTML VS REACT + JSX ▸ React and JSX are not standard and JSX requires a compiler. ▸ React reconciliation is doing diff checking per node so there might be a lot of unnecessary checks when re-rendering and with lit-html the tag functions separate static from dynamic parts so checks are very fast. ▸ LIT-HTML is very small ~ 2.5K and Web Components are native.
CREATING LIGHTWEIGHT JS APPS W/ WEB COMPONENTS AND LIT-HTML LARGER 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, Netflix, Google Earth and others) ▸ SkateJS - library providing functional abstraction over web components. ▸ Angular Elements
CREATING LIGHTWEIGHT JS APPS W/ WEB COMPONENTS AND LIT-HTML ADDITIONAL RESOURCES ▸ https://custom-elements-everywhere.com - This project runs a suite of tests against each framework to identify interoperability issues, and highlight potential fixes already implemented in other frameworks.
CREATING LIGHTWEIGHT JS APPS W/ WEB COMPONENTS AND LIT-HTML WEB COMPONENTS SERVER SIDE RENDERING ▸ SkateJS SSR - @skatejs/ssr is a web component server-side rendering and testing library. (uses undom) ▸ Rendertron - Rendertron is a headless Chrome rendering solution designed to render & serialise web pages on the fly. ▸ Domino - Server-side DOM implementation based on Mozilla's dom.js
CREATING LIGHTWEIGHT JS APPS W/ WEB COMPONENTS AND LIT-HTML CONNECT GitHub > https://github.com/iliaidakiev (/slides/ - list of future and past events) Twitter > @ilia_idakiev
THANK YOU!

More Related Content

What's hot (20)

PPTX
Angular js 1.3 presentation for fed nov 2014
Sarah Hudson
 
PPTX
Understanding angular js
Aayush Shrestha
 
PDF
Getting Started with Combine And SwiftUI
Scott Gardner
 
PPTX
React render props
Saikat Samanta
 
PDF
SwiftUI and Combine All the Things
Scott Gardner
 
PPTX
Angular Js Basics
أحمد عبد الوهاب
 
PPTX
Web components
Tudor Barbu
 
PPT
Dynamic Application Development by NodeJS ,AngularJS with OrientDB
Apaichon Punopas
 
PPTX
Angular js 1.0-fundamentals
Venkatesh Narayanan
 
PDF
MVVM with SwiftUI and Combine
Tai Lun Tseng
 
PPTX
IndexedDB and Push Notifications in Progressive Web Apps
Adégòkè Obasá
 
PPTX
Angular js PPT
Imtiyaz Ahmad Khan
 
PPTX
ReactJS for Beginners
Oswald Campesato
 
PPTX
Angularjs 2
Cubet Techno Labs
 
PPTX
The Many Ways to Build Modular JavaScript
Tim Perry
 
PDF
AngularJS Workshop
Gianluca Cacace
 
PPTX
Its time to React.js
Ritesh Mehrotra
 
PPTX
React js
Oswald Campesato
 
PPTX
Learn react-js
C...L, NESPRESSO, WAFAASSURANCE, SOFRECOM ORANGE
 
PPTX
APIs, APIs Everywhere!
BIWUG
 
Angular js 1.3 presentation for fed nov 2014
Sarah Hudson
 
Understanding angular js
Aayush Shrestha
 
Getting Started with Combine And SwiftUI
Scott Gardner
 
React render props
Saikat Samanta
 
SwiftUI and Combine All the Things
Scott Gardner
 
Angular Js Basics
أحمد عبد الوهاب
 
Web components
Tudor Barbu
 
Dynamic Application Development by NodeJS ,AngularJS with OrientDB
Apaichon Punopas
 
Angular js 1.0-fundamentals
Venkatesh Narayanan
 
MVVM with SwiftUI and Combine
Tai Lun Tseng
 
IndexedDB and Push Notifications in Progressive Web Apps
Adégòkè Obasá
 
Angular js PPT
Imtiyaz Ahmad Khan
 
ReactJS for Beginners
Oswald Campesato
 
Angularjs 2
Cubet Techno Labs
 
The Many Ways to Build Modular JavaScript
Tim Perry
 
AngularJS Workshop
Gianluca Cacace
 
Its time to React.js
Ritesh Mehrotra
 
React js
Oswald Campesato
 
Learn react-js
C...L, NESPRESSO, WAFAASSURANCE, SOFRECOM ORANGE
 
APIs, APIs Everywhere!
BIWUG
 

Similar to Creating lightweight JS Apps w/ Web Components and lit-html (20)

PDF
Web Components Everywhere
Ilia Idakiev
 
PDF
Building Reusable Custom Elements With Angular
Ilia Idakiev
 
PDF
Modern frontend development with VueJs
Tudor Barbu
 
PPT
Backbone.js
Knoldus Inc.
 
PPTX
AngularJs Workshop SDP December 28th 2014
Ran Wahle
 
PDF
Web Components v1
Mike Wilcox
 
PDF
Angular - Chapter 4 - Data and Event Handling
WebStackAcademy
 
PPTX
Knockout.js
Vivek Rajan
 
PPTX
Javascript for web Programming creating and embedding with html
E.M.G.yadava womens college
 
PPTX
e-suap - client technologies- english version
Sabino Labarile
 
PDF
Rp 6 session 2 naresh bhatia
sapientindia
 
PDF
Web Components: The future of Web Application Development
Jermaine Oppong
 
PPTX
Practical AngularJS
Wei Ru
 
PPTX
Angular JS, steal the idea
Scott Lee
 
PPTX
angularJs Workshop
Ran Wahle
 
PPTX
Magic of web components
HYS Enterprise
 
PDF
Knockoutjs databinding
Boulos Dib
 
PPTX
Writing HTML5 Web Apps using Backbone.js and GAE
Ron Reiter
 
PPTX
Introduction to java script, how to include java in HTML
backiyalakshmi14
 
PDF
Introduction to angular js
Marco Vito Moscaritolo
 
Web Components Everywhere
Ilia Idakiev
 
Building Reusable Custom Elements With Angular
Ilia Idakiev
 
Modern frontend development with VueJs
Tudor Barbu
 
Backbone.js
Knoldus Inc.
 
AngularJs Workshop SDP December 28th 2014
Ran Wahle
 
Web Components v1
Mike Wilcox
 
Angular - Chapter 4 - Data and Event Handling
WebStackAcademy
 
Knockout.js
Vivek Rajan
 
Javascript for web Programming creating and embedding with html
E.M.G.yadava womens college
 
e-suap - client technologies- english version
Sabino Labarile
 
Rp 6 session 2 naresh bhatia
sapientindia
 
Web Components: The future of Web Application Development
Jermaine Oppong
 
Practical AngularJS
Wei Ru
 
Angular JS, steal the idea
Scott Lee
 
angularJs Workshop
Ran Wahle
 
Magic of web components
HYS Enterprise
 
Knockoutjs databinding
Boulos Dib
 
Writing HTML5 Web Apps using Backbone.js and GAE
Ron Reiter
 
Introduction to java script, how to include java in HTML
backiyalakshmi14
 
Introduction to angular js
Marco Vito Moscaritolo
 
Ad

More from Ilia Idakiev (17)

PDF
No more promises lets RxJS 2 Edit
Ilia Idakiev
 
PDF
Enterprise State Management with NGRX/platform
Ilia Idakiev
 
PDF
Deep Dive into Zone.JS
Ilia Idakiev
 
PDF
RxJS Schedulers - Controlling Time
Ilia Idakiev
 
PDF
No More Promises! Let's RxJS!
Ilia Idakiev
 
PDF
Marble Testing RxJS streams
Ilia Idakiev
 
PDF
Deterministic JavaScript Applications
Ilia Idakiev
 
PDF
State management for enterprise angular applications
Ilia Idakiev
 
PDF
Offline progressive web apps with NodeJS and React
Ilia Idakiev
 
PDF
Testing rx js using marbles within angular
Ilia Idakiev
 
PDF
Predictable reactive state management for enterprise apps using NGRX/platform
Ilia Idakiev
 
PDF
Angular server side rendering with NodeJS - In Pursuit Of Speed
Ilia Idakiev
 
PDF
Angular Offline Progressive Web Apps With NodeJS
Ilia Idakiev
 
PDF
Introduction to Offline Progressive Web Applications
Ilia Idakiev
 
PDF
Reflective injection using TypeScript
Ilia Idakiev
 
PDF
Zone.js
Ilia Idakiev
 
PDF
Predictable reactive state management - ngrx
Ilia Idakiev
 
No more promises lets RxJS 2 Edit
Ilia Idakiev
 
Enterprise State Management with NGRX/platform
Ilia Idakiev
 
Deep Dive into Zone.JS
Ilia Idakiev
 
RxJS Schedulers - Controlling Time
Ilia Idakiev
 
No More Promises! Let's RxJS!
Ilia Idakiev
 
Marble Testing RxJS streams
Ilia Idakiev
 
Deterministic JavaScript Applications
Ilia Idakiev
 
State management for enterprise angular applications
Ilia Idakiev
 
Offline progressive web apps with NodeJS and React
Ilia Idakiev
 
Testing rx js using marbles within angular
Ilia Idakiev
 
Predictable reactive state management for enterprise apps using NGRX/platform
Ilia Idakiev
 
Angular server side rendering with NodeJS - In Pursuit Of Speed
Ilia Idakiev
 
Angular Offline Progressive Web Apps With NodeJS
Ilia Idakiev
 
Introduction to Offline Progressive Web Applications
Ilia Idakiev
 
Reflective injection using TypeScript
Ilia Idakiev
 
Zone.js
Ilia Idakiev
 
Predictable reactive state management - ngrx
Ilia Idakiev
 
Ad

Recently uploaded (20)

PDF
What Makes Contify’s News API Stand Out: Key Features at a Glance
Contify
 
PDF
The Rise of AI and IoT in Mobile App Tech.pdf
IMG Global Infotech
 
PDF
Newgen 2022-Forrester Newgen TEI_13 05 2022-The-Total-Economic-Impact-Newgen-...
darshakparmar
 
PDF
Jak MŚP w Europie Środkowo-Wschodniej odnajdują się w świecie AI
dominikamizerska1
 
PPTX
COMPARISON OF RASTER ANALYSIS TOOLS OF QGIS AND ARCGIS
Sharanya Sarkar
 
PDF
POV_ Why Enterprises Need to Find Value in ZERO.pdf
darshakparmar
 
PPTX
The Project Compass - GDG on Campus MSIT
dscmsitkol
 
PDF
Exolore The Essential AI Tools in 2025.pdf
Srinivasan M
 
PPTX
Building Search Using OpenSearch: Limitations and Workarounds
Sease
 
PPTX
"Autonomy of LLM Agents: Current State and Future Prospects", Oles` Petriv
Fwdays
 
PDF
Bitcoin for Millennials podcast with Bram, Power Laws of Bitcoin
Stephen Perrenod
 
PDF
New from BookNet Canada for 2025: BNC BiblioShare - Tech Forum 2025
BookNet Canada
 
PDF
"Beyond English: Navigating the Challenges of Building a Ukrainian-language R...
Fwdays
 
PPTX
WooCommerce Workshop: Bring Your Laptop
Laura Hartwig
 
PPTX
Future Tech Innovations 2025 – A TechLists Insight
TechLists
 
PDF
July Patch Tuesday
Ivanti
 
PDF
Newgen Beyond Frankenstein_Build vs Buy_Digital_version.pdf
darshakparmar
 
PDF
“NPU IP Hardware Shaped Through Software and Use-case Analysis,” a Presentati...
Edge AI and Vision Alliance
 
PDF
LOOPS in C Programming Language - Technology
RishabhDwivedi43
 
DOCX
Python coding for beginners !! Start now!#
Rajni Bhardwaj Grover
 
What Makes Contify’s News API Stand Out: Key Features at a Glance
Contify
 
The Rise of AI and IoT in Mobile App Tech.pdf
IMG Global Infotech
 
Newgen 2022-Forrester Newgen TEI_13 05 2022-The-Total-Economic-Impact-Newgen-...
darshakparmar
 
Jak MŚP w Europie Środkowo-Wschodniej odnajdują się w świecie AI
dominikamizerska1
 
COMPARISON OF RASTER ANALYSIS TOOLS OF QGIS AND ARCGIS
Sharanya Sarkar
 
POV_ Why Enterprises Need to Find Value in ZERO.pdf
darshakparmar
 
The Project Compass - GDG on Campus MSIT
dscmsitkol
 
Exolore The Essential AI Tools in 2025.pdf
Srinivasan M
 
Building Search Using OpenSearch: Limitations and Workarounds
Sease
 
"Autonomy of LLM Agents: Current State and Future Prospects", Oles` Petriv
Fwdays
 
Bitcoin for Millennials podcast with Bram, Power Laws of Bitcoin
Stephen Perrenod
 
New from BookNet Canada for 2025: BNC BiblioShare - Tech Forum 2025
BookNet Canada
 
"Beyond English: Navigating the Challenges of Building a Ukrainian-language R...
Fwdays
 
WooCommerce Workshop: Bring Your Laptop
Laura Hartwig
 
Future Tech Innovations 2025 – A TechLists Insight
TechLists
 
July Patch Tuesday
Ivanti
 
Newgen Beyond Frankenstein_Build vs Buy_Digital_version.pdf
darshakparmar
 
“NPU IP Hardware Shaped Through Software and Use-case Analysis,” a Presentati...
Edge AI and Vision Alliance
 
LOOPS in C Programming Language - Technology
RishabhDwivedi43
 
Python coding for beginners !! Start now!#
Rajni Bhardwaj Grover
 

Creating lightweight JS Apps w/ Web Components and lit-html

  • 1. CREATING LIGHTWEIGHT JS APPS W/ WEB COMPONENTS AND LIT-HTML 🔥-HTML+
  • 2. A B O U T M E { "name": "Ilia Idakiev", "experience": [ “Google Developer Expert (GDE)“, "Developer & Co-founder @ HILLGRAND", "Lecturer in 'Advanced JS' @ Sofia University", "Contractor / Consultant", "Public / Private Courses” ], "involvedIn": [ "Angular Sofia", "SofiaJS / BeerJS", ] }
  • 3. CREATING LIGHTWEIGHT JS APPS W/ WEB COMPONENTS AND LIT-HTML SEPARATION OF CONCERNS (SOC) ▸ Design principle for separating a computer program into distinct sections, such that each section addresses a separate concern. (Modularity)
  • 4. CREATING LIGHTWEIGHT JS APPS W/ WEB COMPONENTS AND LIT-HTML 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/
  • 5. CREATING LIGHTWEIGHT JS APPS W/ WEB COMPONENTS AND LIT-HTML 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 specifications 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.
  • 6. CREATING LIGHTWEIGHT JS APPS W/ WEB COMPONENTS AND LIT-HTML 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 define new HTML elements. ▸ HTML Imports - Declarative methods of importing HTML documents into other documents. (Replaced by ES6 Imports).
  • 8. CREATING LIGHTWEIGHT JS APPS W/ WEB COMPONENTS AND LIT-HTML DEFINE CUSTOM ELEMENT (function () { }()); Create an isolated scope counter.js
  • 9. CREATING LIGHTWEIGHT JS APPS W/ WEB COMPONENTS AND LIT-HTML (function () { class Counter extends HTMLElement { } }()); DEFINE CUSTOM ELEMENT Create a new class that extends HTMLElement counter.js
  • 10. CREATING LIGHTWEIGHT JS APPS W/ WEB COMPONENTS AND LIT-HTML (function () { class Counter extends HTMLElement { } customElements.define('hg-counter', Counter); }()); DEFINE CUSTOM ELEMENT Register the new custom element. counter.js
  • 11. CREATING LIGHTWEIGHT JS APPS W/ WEB COMPONENTS AND LIT-HTML 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.
  • 12. CREATING LIGHTWEIGHT JS APPS W/ WEB COMPONENTS AND LIT-HTML 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
  • 13. CREATING LIGHTWEIGHT JS APPS W/ WEB COMPONENTS AND LIT-HTML CREATE TEMPLATE HELPER FUNCTION function createTemplate(string) { const template = document.createElement('template'); template.innerHTML = string; return template; } utils.js
  • 14. CREATING LIGHTWEIGHT JS APPS W/ WEB COMPONENTS AND LIT-HTML CREATE THE TEMPLATE (function () { const template = createTemplate('<div>Hello World<div>'); class Counter extends HTMLElement { } customElements.define('hg-counter', Counter); }()); Use the create template helper function. counter.js
  • 15. CREATING LIGHTWEIGHT JS APPS W/ WEB COMPONENTS AND LIT-HTML 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 defined 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 fill with their own markup).
  • 16. CREATING LIGHTWEIGHT JS APPS W/ WEB COMPONENTS AND LIT-HTML DEFINE CUSTOM ELEMENT (function () { const template = createTemplate('<div>Hello World<div>'); class Counter extends HTMLElement { constructor() { super(); } } customElements.define('hg-counter', Counter); }()); counter.js Utilise the class constructor.
  • 17. CREATING LIGHTWEIGHT JS APPS W/ WEB COMPONENTS AND LIT-HTML ATTACH SHADOW DOM (function () { const template = createTemplate('<div>Hello World<div>'); class Counter extends HTMLElement { constructor() { super(); const shadowRoot = this.attachShadow({ mode: 'open' }); } } customElements.define('hg-counter', Counter); }()); Attach the shadow DOM. counter.js
  • 18. CREATING LIGHTWEIGHT JS APPS W/ WEB COMPONENTS AND LIT-HTML (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
  • 19. CREATING LIGHTWEIGHT JS APPS W/ WEB COMPONENTS AND LIT-HTML USE OUR CUSTOM ELEMENT <body> <hg-counter></hg-counter> <script src="./util.js"></script> <script src="./counter.js"></script> </body> index.html
  • 20. CREATING LIGHTWEIGHT JS APPS W/ WEB COMPONENTS AND LIT-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> `); class Counter extends HTMLElement { constructor() { super();
  • 21. CREATING LIGHTWEIGHT JS APPS W/ WEB COMPONENTS AND LIT-HTML 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++; } });
  • 22. CREATING LIGHTWEIGHT JS APPS W/ WEB COMPONENTS AND LIT-HTML UPDATING THE DOM utils.js function updateDOM(root, updates) { updates.forEach(item => { root.querySelectorAll(`[name=${item.name}]`).forEach(element => element.textContent = item.value ); }); }
  • 23. CREATING LIGHTWEIGHT JS APPS W/ WEB COMPONENTS AND LIT-HTML 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;
  • 24. CREATING LIGHTWEIGHT JS APPS W/ WEB COMPONENTS AND LIT-HTML 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 }]); }
  • 25. CREATING LIGHTWEIGHT JS APPS W/ WEB COMPONENTS AND LIT-HTML 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;
  • 26. CREATING LIGHTWEIGHT JS APPS W/ WEB COMPONENTS AND LIT-HTML CUSTOM COMPONENT ATTRIBUTES index.html <body> <hg-counter value="10"></hg-counter> <script src="./util.js"></script> <script src="./counter.js"></script> </body>
  • 27. CREATING LIGHTWEIGHT JS APPS W/ WEB COMPONENTS AND LIT-HTML 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.
  • 28. CREATING LIGHTWEIGHT JS APPS W/ WEB COMPONENTS AND LIT-HTML CUSTOM COMPONENT ATTRIBUTES index.html class Counter extends HTMLElement { attributeChangedCallback(name, oldValue, newValue) { if (name === 'value') { this.counter = newValue; } } constructor() { Handle attribute changes
  • 29. CREATING LIGHTWEIGHT JS APPS W/ WEB COMPONENTS AND LIT-HTML 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() { Define which attributes should be watched
  • 31. CREATING LIGHTWEIGHT JS APPS W/ WEB COMPONENTS AND LIT-HTML 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 {
  • 32. CREATING LIGHTWEIGHT JS APPS W/ WEB COMPONENTS AND LIT-HTML WEB COMPONENT CSS ▸ :host - selects the shadow host of the shadow DOM ▸ :host() - match only if the selector given as the function's parameter matches the shadow host. ▸ :host-context() -  match only if the selector given as the function's parameter matches the shadow host's ancestor(s) in the place it sits inside the DOM hierarchy. ▸ ::slotted() - represents any element that has been placed into a slot inside an HTML template
  • 34. CREATING LIGHTWEIGHT JS APPS W/ WEB COMPONENTS AND LIT-HTML CUSTOM EVENTS Dispatching custom event const test = shadowRoot.getElementById('element-button'); test.addEventListener('click', () => { this.dispatchEvent(new CustomEvent('toggle', { detail: { value: true } })) }); custom-element.js
  • 35. CREATING LIGHTWEIGHT JS APPS W/ WEB COMPONENTS AND LIT-HTML CUSTOM EVENTS Listening for custom event • CustomEvent {isTrusted: false, detail: {value: true}, type: "toggle", …} const el = document.getElementById('my-custom-element'); el.addEventListener('toggle', e => { console.log(e); }); main.js Console
  • 36. CREATING LIGHTWEIGHT JS APPS W/ WEB COMPONENTS AND LIT-HTML FURTHER READING ▸ Extending different HTML Elements
 (e.g. HTMLButton)
  • 37. CREATING LIGHTWEIGHT JS APPS W/ WEB COMPONENTS AND LIT-HTML BENEFITS OF USING CUSTOM COMPONENTS ▸ Framework agnostic - Written in JavaScript and native to the browser. ▸ Simplifies CSS - Scoped DOM means you can use simple CSS selectors, more generic id/class names, and not worry about naming conflicts. • 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.
  • 38. CREATING LIGHTWEIGHT JS APPS W/ WEB COMPONENTS AND LIT-HTML BROWSER SUPPORT
  • 39. CREATING LIGHTWEIGHT JS APPS W/ WEB COMPONENTS AND LIT-HTML 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)
  • 40. CREATING LIGHTWEIGHT JS APPS W/ WEB COMPONENTS AND LIT-HTML LIT HTML ▸ Library Developed by the Polymer Team @ GOOGLE ▸ Efficient - 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.
  • 42. CREATING LIGHTWEIGHT JS APPS W/ WEB COMPONENTS AND LIT-HTML TAG FUNCTIONS function myTagFn(str, ...expr) { console.log(str, expr); return str.reduce((acc, curr, i) => acc + curr + (expr[i] || ''), ''); } myTagFn`1+1 equals ${1+1} and 3 + 3 equals ${3+3} ${3+2}` > (4) ["1+1 equals ", " and 3 + 3 equals ", " ", ""] (3) [2, 6, 5] > “1+1 equals 2 and 3 + 3 equals 6 5" Console
  • 44. CREATING LIGHTWEIGHT JS APPS W/ WEB COMPONENTS AND LIT-HTML import { html, render } from 'lit-html'; const getTemplate = (context: App) => html`<div>Hello World!</div>`; export class App extends HTMLElement { constructor() { super(); const root = this.attachShadow({ mode: 'closed' }); this.changeHandler = () => { if (!this.scheduledRender) { this.scheduledRender = true; Promise.resolve().then(() => { this.scheduledRender = false; render(getTemplate(this), root); }); } } } connectedCallback() { this.changeHandler(); } } customElements.define('hg-app', App);
  • 45. CREATING LIGHTWEIGHT JS APPS W/ WEB COMPONENTS AND LIT-HTML import { html, render } from 'lit-html'; const getTemplate = (context: App) => html`<div>Hello World!</div>`; export class App extends HTMLElement { constructor() { super(); const root = this.attachShadow({ mode: 'closed' }); this.changeHandler = () => { if (!this.scheduledRender) { this.scheduledRender = true; Promise.resolve().then(() => { this.scheduledRender = false; render(getTemplate(this), root); }); } } } connectedCallback() { this.changeHandler(); } } customElements.define('hg-app', App);
  • 46. CREATING LIGHTWEIGHT JS APPS W/ WEB COMPONENTS AND LIT-HTML import { html, render } from 'lit-html'; const getTemplate = (context: App) => html`<div>Hello World!</div>`; export class App extends HTMLElement { constructor() { super(); const root = this.attachShadow({ mode: 'closed' }); this.changeHandler = () => { if (!this.scheduledRender) { this.scheduledRender = true; Promise.resolve().then(() => { this.scheduledRender = false; render(getTemplate(this), root); }); } } } connectedCallback() { this.changeHandler(); } } customElements.define('hg-app', App);
  • 47. CREATING LIGHTWEIGHT JS APPS W/ WEB COMPONENTS AND LIT-HTML import { html, render } from 'lit-html'; const getTemplate = (context: App) => html`<div>Hello World!</div>`; export class App extends HTMLElement { constructor() { super(); const root = this.attachShadow({ mode: 'closed' }); this.changeHandler = () => { if (!this.scheduledRender) { this.scheduledRender = true; Promise.resolve().then(() => { this.scheduledRender = false; render(getTemplate(this), root); }); } } } connectedCallback() { this.changeHandler(); } } customElements.define('hg-app', App);
  • 48. CREATING LIGHTWEIGHT JS APPS W/ WEB COMPONENTS AND LIT-HTML import { html, render } from 'lit-html'; const getTemplate = (context: App) => html`<div>Hello World!</div>`; export class App extends HTMLElement { constructor() { super(); const root = this.attachShadow({ mode: 'closed' }); this.changeHandler = () => { if (!this.scheduledRender) { this.scheduledRender = true; Promise.resolve().then(() => { this.scheduledRender = false; render(getTemplate(this), root); }); } } } connectedCallback() { this.changeHandler(); } } customElements.define('hg-app', App);
  • 49. CREATING LIGHTWEIGHT JS APPS W/ WEB COMPONENTS AND LIT-HTML import { html, render } from 'lit-html'; const getTemplate = (context: App) => html`<div>Hello World!</div>`; export class App extends HTMLElement { constructor() { super(); const root = this.attachShadow({ mode: 'closed' }); this.changeHandler = () => { if (!this.scheduledRender) { this.scheduledRender = true; Promise.resolve().then(() => { this.scheduledRender = false; render(getTemplate(this), root); }); } } } connectedCallback() { this.changeHandler(); } } customElements.define('hg-app', App);
  • 50. CREATING LIGHTWEIGHT JS APPS W/ WEB COMPONENTS AND LIT-HTML import { html, render } from 'lit-html'; const getTemplate = (context: App) => html`<div>Hello World!</div>`; export class App extends HTMLElement { constructor() { super(); const root = this.attachShadow({ mode: 'closed' }); this.changeHandler = () => { if (!this.scheduledRender) { this.scheduledRender = true; Promise.resolve().then(() => { this.scheduledRender = false; render(getTemplate(this), root); }); } } } connectedCallback() { this.changeHandler(); } } customElements.define('hg-app', App);
  • 51. CREATING LIGHTWEIGHT JS APPS W/ WEB COMPONENTS AND LIT-HTML import { html, render } from 'lit-html'; const getTemplate = (context: App) => html`<div>Hello World!</div>`; export class App extends HTMLElement { constructor() { super(); const root = this.attachShadow({ mode: 'closed' }); this.changeHandler = () => { if (!this.scheduledRender) { this.scheduledRender = true; Promise.resolve().then(() => { this.scheduledRender = false; render(getTemplate(this), root); }); } } } connectedCallback() { this.changeHandler(); } } customElements.define('hg-app', App);
  • 52. CREATING LIGHTWEIGHT JS APPS W/ WEB COMPONENTS AND LIT-HTML import { html, render } from 'lit-html'; const getTemplate = (context: App) => html`<div>Hello World!</div>`; export class App extends HTMLElement { constructor() { super(); const root = this.attachShadow({ mode: 'closed' }); this.changeHandler = () => { if (!this.scheduledRender) { this.scheduledRender = true; Promise.resolve().then(() => { this.scheduledRender = false; render(getTemplate(this), root); }); } } } connectedCallback() { this.changeHandler(); } } customElements.define('hg-app', App);
  • 53. CREATING LIGHTWEIGHT JS APPS W/ WEB COMPONENTS AND LIT-HTML import { html, render } from 'lit-html'; const getTemplate = (context: App) => html`<div>Hello World!</div>`; export class App extends HTMLElement { constructor() { super(); const root = this.attachShadow({ mode: 'closed' }); this.changeHandler = () => { if (!this.scheduledRender) { this.scheduledRender = true; Promise.resolve().then(() => { this.scheduledRender = false; render(getTemplate(this), root); }); } } } connectedCallback() { this.changeHandler(); } } customElements.define('hg-app', App);
  • 54. CREATING LIGHTWEIGHT JS APPS W/ WEB COMPONENTS AND LIT-HTML import { html, render } from 'lit-html'; const getTemplate = (context: App) => html`<div>Hello World!</div>`; export class App extends HTMLElement { constructor() { super(); const root = this.attachShadow({ mode: 'closed' }); this.changeHandler = () => { if (!this.scheduledRender) { this.scheduledRender = true; Promise.resolve().then(() => { this.scheduledRender = false; render(getTemplate(this), root); }); } } } connectedCallback() { this.changeHandler(); } } customElements.define('hg-app', App);
  • 55. CREATING LIGHTWEIGHT JS APPS W/ WEB COMPONENTS AND LIT-HTML import { html, render } from 'lit-html'; const getTemplate = (context: App) => html`<div>Hello World!</div>`; export class App extends HTMLElement { constructor() { super(); const root = this.attachShadow({ mode: 'closed' }); this.changeHandler = () => { if (!this.scheduledRender) { this.scheduledRender = true; Promise.resolve().then(() => { this.scheduledRender = false; render(getTemplate(this), root); }); } } } connectedCallback() { this.changeHandler(); } } customElements.define('hg-app', App);
  • 56. DEMOINTERPOLATION & EVENT HANDLER BINDING
  • 57. CREATING LIGHTWEIGHT JS APPS W/ WEB COMPONENTS AND LIT-HTML const getTemplate = (context: App) => html` <div>${context.counter}</div> <button @click=${context.incrementHandler}>Increment</button> `; export class App extends HTMLElement { counter = 0; constructor() { ... } incrementHandler = () => { this.counter++; this.changeHandler(); } } customElements.define('hg-app', App);
  • 58. CREATING LIGHTWEIGHT JS APPS W/ WEB COMPONENTS AND LIT-HTML const getTemplate = (context: App) => html` <div>${context.counter}</div> <button @click=${context.incrementHandler}>Increment</button> `; export class App extends HTMLElement { counter = 0; constructor() { ... } incrementHandler = () => { this.counter++; this.changeHandler(); } } customElements.define('hg-app', App);
  • 59. CREATING LIGHTWEIGHT JS APPS W/ WEB COMPONENTS AND LIT-HTML const getTemplate = (context: App) => html` <div>${context.counter}</div> <button @click=${context.incrementHandler}>Increment</button> `; export class App extends HTMLElement { counter = 0; constructor() { ... } incrementHandler = () => { this.counter++; this.changeHandler(); } } customElements.define('hg-app', App);
  • 60. CREATING LIGHTWEIGHT JS APPS W/ WEB COMPONENTS AND LIT-HTML const getTemplate = (context: App) => html` <div>${context.counter}</div> <button @click=${context.incrementHandler}>Increment</button> `; export class App extends HTMLElement { counter = 0; constructor() { ... } incrementHandler = () => { this.counter++; this.changeHandler(); } } customElements.define('hg-app', App);
  • 61. CREATING LIGHTWEIGHT JS APPS W/ WEB COMPONENTS AND LIT-HTML const getTemplate = (context: App) => html` <div>${context.counter}</div> <button @click=${context.incrementHandler}>Increment</button> `; export class App extends HTMLElement { counter = 0; constructor() { ... } incrementHandler = () => { this.counter++; this.changeHandler(); } } customElements.define('hg-app', App);
  • 62. CREATING LIGHTWEIGHT JS APPS W/ WEB COMPONENTS AND LIT-HTML const getTemplate = (context: App) => html` <div>${context.counter}</div> <button @click=${context.incrementHandler}>Increment</button> `; export class App extends HTMLElement { counter = 0; constructor() { ... } incrementHandler = () => { this.counter++; this.changeHandler(); } } customElements.define('hg-app', App);
  • 63. CREATING LIGHTWEIGHT JS APPS W/ WEB COMPONENTS AND LIT-HTML const getTemplate = (context: App) => html` <div>${context.counter}</div> <button @click=${context.incrementHandler}>Increment</button> `; export class App extends HTMLElement { counter = 0; constructor() { ... } incrementHandler = () => { this.counter++; this.changeHandler(); } } customElements.define('hg-app', App);
  • 64. CREATING LIGHTWEIGHT JS APPS W/ WEB COMPONENTS AND LIT-HTML const getTemplate = (context: App) => html` <div>${context.counter}</div> <button @click=${context.incrementHandler}>Increment</button> `; export class App extends HTMLElement { counter = 0; constructor() { ... } incrementHandler = () => { this.counter++; this.changeHandler(); } } customElements.define('hg-app', App);
  • 65. CREATING LIGHTWEIGHT JS APPS W/ WEB COMPONENTS AND LIT-HTML const getTemplate = (context: App) => html` <div>${context.counter}</div> <button @click=${context.incrementHandler}>Increment</button> `; export class App extends HTMLElement { counter = 0; constructor() { ... } incrementHandler = () => { this.counter++; this.changeHandler(); } } customElements.define('hg-app', App);
  • 66. CREATING LIGHTWEIGHT JS APPS W/ WEB COMPONENTS AND LIT-HTML const getTemplate = (context: App) => html` <div>${context.counter}</div> <button @click=${context.incrementHandler}>Increment</button> `; export class App extends HTMLElement { counter = 0; constructor() { ... } incrementHandler = () => { this.counter++; this.changeHandler(); } } customElements.define('hg-app', App);
  • 68. CREATING LIGHTWEIGHT JS APPS W/ WEB COMPONENTS AND LIT-HTML const getAppTemplate = (context: App) => html` <hg-counter .value=${context.counter}></hg-counter> <button @click=${context.incrementHandler}>Increment</button> `;
  • 69. CREATING LIGHTWEIGHT JS APPS W/ WEB COMPONENTS AND LIT-HTML const getAppTemplate = (context: App) => html` <hg-counter .value=${context.counter}></hg-counter> <button @click=${context.incrementHandler}>Increment</button> `;
  • 70. CREATING LIGHTWEIGHT JS APPS W/ WEB COMPONENTS AND LIT-HTML const getAppTemplate = (context: App) => html` <hg-counter .value=${context.counter}></hg-counter> <button @click=${context.incrementHandler}>Increment</button> `;
  • 71. CREATING LIGHTWEIGHT JS APPS W/ WEB COMPONENTS AND LIT-HTML const getAppTemplate = (context: App) => html` <hg-counter .value=${context.counter}></hg-counter> <button @click=${context.incrementHandler}>Increment</button> `;
  • 72. CREATING LIGHTWEIGHT JS APPS W/ WEB COMPONENTS AND LIT-HTML const getCounterTemplate = (context: Counter) => html` <div>${context.value}</div> `; export class Counter extends HTMLElement { _value = 0; set value(value) { this._value = value; this.changeHandler(); } get value() { return this._value; } constructor() { super(); const root = this.attachShadow({ mode: 'closed' }); } }
  • 73. CREATING LIGHTWEIGHT JS APPS W/ WEB COMPONENTS AND LIT-HTML const getCounterTemplate = (context: Counter) => html` <div>${context.value}</div> `; export class Counter extends HTMLElement { _value = 0; set value(value) { this._value = value; this.changeHandler(); } get value() { return this._value; } constructor() { super(); const root = this.attachShadow({ mode: 'closed' }); } }
  • 74. CREATING LIGHTWEIGHT JS APPS W/ WEB COMPONENTS AND LIT-HTML const getCounterTemplate = (context: Counter) => html` <div>${context.value}</div> `; export class Counter extends HTMLElement { _value = 0; set value(value) { this._value = value; this.changeHandler(); } get value() { return this._value; } constructor() { super(); const root = this.attachShadow({ mode: 'closed' }); } }
  • 75. CREATING LIGHTWEIGHT JS APPS W/ WEB COMPONENTS AND LIT-HTML const getCounterTemplate = (context: Counter) => html` <div>${context.value}</div> `; export class Counter extends HTMLElement { _value = 0; set value(value) { this._value = value; this.changeHandler(); } get value() { return this._value; } constructor() { super(); const root = this.attachShadow({ mode: 'closed' }); } }
  • 76. CREATING LIGHTWEIGHT JS APPS W/ WEB COMPONENTS AND LIT-HTML const getCounterTemplate = (context: Counter) => html` <div>${context.value}</div> `; export class Counter extends HTMLElement { _value = 0; set value(value) { this._value = value; this.changeHandler(); } get value() { return this._value; } constructor() { super(); const root = this.attachShadow({ mode: 'closed' }); } }
  • 77. CREATING LIGHTWEIGHT JS APPS W/ WEB COMPONENTS AND LIT-HTML const getCounterTemplate = (context: Counter) => html` <div>${context.value}</div> `; export class Counter extends HTMLElement { _value = 0; set value(value) { this._value = value; this.changeHandler(); } get value() { return this._value; } constructor() { super(); const root = this.attachShadow({ mode: 'closed' }); ... } }
  • 78. CAN WE EXTRACT THE REPEATING PARTS?
  • 80. export function Component(config: { mode?: 'open' | 'closed', selector: string }) { return function componentDecorator(target) { const cmp = class extends HTMLElement { scheduledRender = false; constructor(...args) { super(); const root = this.attachShadow({ mode: config.mode || 'closed' }); const targetInstance = new target(...args); const { constructor, ...prototypeProps } = Object.getOwnPropertyDescriptors(target.prototype); const props = { ...Object.getOwnPropertyDescriptors(targetInstance), ...prototypeProps } Object.defineProperties(this, props); this.changeHandler = function () { if (!this.scheduledRender) { this.scheduledRender = true; Promise.resolve().then(() => { this.scheduledRender = false; if (!this.render) { return; } render(this.render(), root); }); } } return this; } connectedCallback() { this.changeHandler(); if (this.onConnected) { this.onConnected(); } } }; customElements.define(config.selector, cmp); return cmp as any; }; }
  • 81. function property(target: any, propertyKey: string | symbol) { let _value; Object.defineProperty(target, propertyKey, { set: function (value) { _value = value; if (!this.changeHandler) { return; } this.changeHandler(); }, get: function () { return _value; } }) }
  • 82. CREATING LIGHTWEIGHT JS APPS W/ WEB COMPONENTS AND LIT-HTML @Component({ selector: 'hg-counter' }) export class Counter { @property value; onConnected() { console.log('Counter connected'); } render() { return html` <div>${this.value}</div> `; } }
  • 83. CREATING LIGHTWEIGHT JS APPS W/ WEB COMPONENTS AND LIT-HTML LIT ELEMENT ▸ A simple base class for creating fast, lightweight web components https://lit-element.polymer-project.org/
  • 85. CREATING LIGHTWEIGHT JS APPS W/ WEB COMPONENTS AND LIT-HTML LIT HTML DIRECTIVES (1) ▸ Directives are functions that can customize how lit-html renders values. Template authors can use directives in their templates like other functions
  • 86. CREATING LIGHTWEIGHT JS APPS W/ WEB COMPONENTS AND LIT-HTML LIT HTML DIRECTIVES (2) ▸ The returned function is called each time the part is rendered. The part argument is a Part object with an API for directly managing the dynamic DOM associated with expressions. Each type of binding has its own specific Part object: ▸ NodePart for content bindings. ▸ AttributePart for standard attribute bindings. ▸ BooleanAttributePart for boolean attribute bindings. ▸ EventPart for event bindings. ▸ PropertyPart for property bindings.
  • 87. CREATING LIGHTWEIGHT JS APPS W/ WEB COMPONENTS AND LIT-HTML LIT HTML DIRECTIVES (3) ▸ Each of these part types implement a common API: ▸ value. Holds the current value of the part. ▸ setValue. Sets the pending value of the part. ▸ commit. Writes the pending value to the DOM. In most cases this happens automatically—this method is only required for advanced use cases, like asynchronous directives.
  • 89. CREATING LIGHTWEIGHT JS APPS W/ WEB COMPONENTS AND LIT-HTML
  • 90. CREATING LIGHTWEIGHT JS APPS W/ WEB COMPONENTS AND LIT-HTML
  • 91. CREATING LIGHTWEIGHT JS APPS W/ WEB COMPONENTS AND LIT-HTML LIT HTML UNTIL BUILT-IN DIRECTIVE
  • 92. CREATING LIGHTWEIGHT JS APPS W/ WEB COMPONENTS AND LIT-HTML LIT HTML BUILT-IN DIRECTIVES ▸ asyncAppend and asyncReplace ▸ cache ▸ classMap ▸ ifDefined ▸ guard ▸ repeat ▸ styleMap ▸ unsafeHTML ▸ until
  • 93. CREATING LIGHTWEIGHT JS APPS W/ WEB COMPONENTS AND LIT-HTML LIT-HTML & HTML/CSS ▸ Dynamic css class/id and property names ▸ Dynamic css property values ▸ Sharing styles and HTML between the isolated web components (mixins)
  • 94. CREATING LIGHTWEIGHT JS APPS W/ WEB COMPONENTS AND LIT-HTML WEB COMPONENTS + LIT-HTML VS REACT + JSX ▸ React and JSX are not standard and JSX requires a compiler. ▸ React reconciliation is doing diff checking per node so there might be a lot of unnecessary checks when re-rendering and with lit-html the tag functions separate static from dynamic parts so checks are very fast. ▸ LIT-HTML is very small ~ 2.5K and Web Components are native.
  • 95. CREATING LIGHTWEIGHT JS APPS W/ WEB COMPONENTS AND LIT-HTML LARGER 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, Netflix, Google Earth and others) ▸ SkateJS - library providing functional abstraction over web components. ▸ Angular Elements
  • 96. CREATING LIGHTWEIGHT JS APPS W/ WEB COMPONENTS AND LIT-HTML ADDITIONAL RESOURCES ▸ https://custom-elements-everywhere.com - This project runs a suite of tests against each framework to identify interoperability issues, and highlight potential fixes already implemented in other frameworks.
  • 97. CREATING LIGHTWEIGHT JS APPS W/ WEB COMPONENTS AND LIT-HTML WEB COMPONENTS SERVER SIDE RENDERING ▸ SkateJS SSR - @skatejs/ssr is a web component server-side rendering and testing library. (uses undom) ▸ Rendertron - Rendertron is a headless Chrome rendering solution designed to render & serialise web pages on the fly. ▸ Domino - Server-side DOM implementation based on Mozilla's dom.js
  • 98. CREATING LIGHTWEIGHT JS APPS W/ WEB COMPONENTS AND LIT-HTML CONNECT GitHub > https://github.com/iliaidakiev (/slides/ - list of future and past events) Twitter > @ilia_idakiev