SlideShare a Scribd company logo

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

Ilia Idakiev, profile picture
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

PPTX
Angular JS
John Temoty Roca
 
PPTX
Getting Started with Angular JS
Akshay Mathur
 
PPTX
SharePoint Saturday Atlanta 2015
Pushkar Chivate
 
PDF
Building Universal Web Apps with React ForwardJS 2017
Elyse Kolker Gordon
 
DOCX
Adding a view
Nhan Do
 
PPTX
Angular Data Binding
Jennifer Estrada
 
PPTX
React JS .NET
Jennifer Estrada
 
PDF
Data binding w Androidzie
The Software House
 
Angular JS
John Temoty Roca
 
Getting Started with Angular JS
Akshay Mathur
 
SharePoint Saturday Atlanta 2015
Pushkar Chivate
 
Building Universal Web Apps with React ForwardJS 2017
Elyse Kolker Gordon
 
Adding a view
Nhan Do
 
Angular Data Binding
Jennifer Estrada
 
React JS .NET
Jennifer Estrada
 
Data binding w Androidzie
The Software House
 

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
 
Ad

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
The Web Components interoperability challenge - Horacio Gonzalez - Codemotion...
Codemotion
 
PDF
HTML literals, the JSX of the platform
Kenneth Rohde Christiansen
 
PDF
Webcomponents from 0-100 - with Google's Lit
Filip Bruun Bech-Larsen
 
PPTX
Web component
EngrHasanuzzamanSumo
 
PDF
Build Reusable Web Components using HTML5 Web cComponents
Gil Fink
 
PDF
Whats next in clientside templating
Filip Bruun Bech-Larsen
 
PDF
Reactive Type safe Webcomponents with skateJS
Martin Hochel
 
PDF
Web component driven development
Gil Fink
 
PDF
ENIB 2015-2016 - CAI Web - S01E01- Côté navigateur 3/3 - Web components avec ...
Horacio Gonzalez
 
PDF
The future of templating and frameworks
Filip Bruun Bech-Larsen
 
PDF
ENIB 2015 2016 - CAI Web S02E01- Côté Navigateur 3/3 - Web Components avec Po...
Horacio Gonzalez
 
PPTX
An Introduction to Web Components
Red Pill Now
 
PDF
Whats next in templating
Filip Bruun Bech-Larsen
 
PDF
The Time for Vanilla Web Components has Arrived
Gil Fink
 
PPTX
Magic of web components
HYS Enterprise
 
PDF
Web components: A simpler and faster react
Chris Lorenzo
 
PDF
Having Fun Building Web Applications (Day 1 Slides)
Clarence Ngoh
 
PDF
Whats next in clientside templating
Filip Bruun Bech-Larsen
 
Web Components Everywhere
Ilia Idakiev
 
Building Reusable Custom Elements With Angular
Ilia Idakiev
 
The Web Components interoperability challenge - Horacio Gonzalez - Codemotion...
Codemotion
 
HTML literals, the JSX of the platform
Kenneth Rohde Christiansen
 
Webcomponents from 0-100 - with Google's Lit
Filip Bruun Bech-Larsen
 
Web component
EngrHasanuzzamanSumo
 
Build Reusable Web Components using HTML5 Web cComponents
Gil Fink
 
Whats next in clientside templating
Filip Bruun Bech-Larsen
 
Reactive Type safe Webcomponents with skateJS
Martin Hochel
 
Web component driven development
Gil Fink
 
ENIB 2015-2016 - CAI Web - S01E01- Côté navigateur 3/3 - Web components avec ...
Horacio Gonzalez
 
The future of templating and frameworks
Filip Bruun Bech-Larsen
 
ENIB 2015 2016 - CAI Web S02E01- Côté Navigateur 3/3 - Web Components avec Po...
Horacio Gonzalez
 
An Introduction to Web Components
Red Pill Now
 
Whats next in templating
Filip Bruun Bech-Larsen
 
The Time for Vanilla Web Components has Arrived
Gil Fink
 
Magic of web components
HYS Enterprise
 
Web components: A simpler and faster react
Chris Lorenzo
 
Having Fun Building Web Applications (Day 1 Slides)
Clarence Ngoh
 
Whats next in clientside templating
Filip Bruun Bech-Larsen
 
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
 

Recently uploaded (20)

DOCX
The AUB Centre for AI in Media Proposal.docx
GAONE9
 
PDF
Shreyas Phanse Resume: Experienced Backend Engineer | Java • Spring Boot • Ka...
SHREYAS PHANSE
 
PPTX
A Presentation on Artificial Intelligence
memembruh336
 
PDF
Peak of Data & AI Encore- AI for Metadata and Smarter Workflows
Safe Software
 
PPTX
Understanding_Digital_Forensics_Presentation.pptx
ImranKhan423233
 
PDF
Dropbox Q2 2025 Financial Results & Investor Presentation
Dropbox
 
PDF
KodekX | Application Modernization Development
KodekX
 
PDF
NewMind AI Weekly Chronicles - August'25 Week I
NewMind AI
 
PPTX
20250228 LYD VKU AI Blended-Learning.pptx
DatVoNgoc
 
PDF
TokAI - TikTok AI Agent : The First AI Application That Analyzes 10,000+ Vira...
SOFTTECHHUB
 
PDF
cuic standard and advanced reporting.pdf
SimoneTitaniumTomase
 
PPTX
PA Analog/Digital System: The Backbone of Modern Surveillance and Communication
AVTRON Technologies LLC
 
PDF
Review of recent advances in non-invasive hemoglobin estimation
IAESIJAI
 
PDF
Build a system with the filesystem maintained by OSTree @ COSCUP 2025
Jian-Hong Pan
 
PDF
Chapter 3 Spatial Domain Image Processing.pdf
Getnet Tigabie Askale -(GM)
 
PDF
Electronic commerce courselecture one. Pdf
OmerMohamed64
 
PDF
Modernizing your data center with Dell and AMD
Principled Technologies
 
PDF
Mobile App Security Testing_ A Comprehensive Guide.pdf
flufftailshop
 
PDF
Encapsulation theory and applications.pdf
gurumoop
 
PDF
Reach Out and Touch Someone: Haptics and Empathic Computing
Mark Billinghurst
 
The AUB Centre for AI in Media Proposal.docx
GAONE9
 
Shreyas Phanse Resume: Experienced Backend Engineer | Java • Spring Boot • Ka...
SHREYAS PHANSE
 
A Presentation on Artificial Intelligence
memembruh336
 
Peak of Data & AI Encore- AI for Metadata and Smarter Workflows
Safe Software
 
Understanding_Digital_Forensics_Presentation.pptx
ImranKhan423233
 
Dropbox Q2 2025 Financial Results & Investor Presentation
Dropbox
 
KodekX | Application Modernization Development
KodekX
 
NewMind AI Weekly Chronicles - August'25 Week I
NewMind AI
 
20250228 LYD VKU AI Blended-Learning.pptx
DatVoNgoc
 
TokAI - TikTok AI Agent : The First AI Application That Analyzes 10,000+ Vira...
SOFTTECHHUB
 
cuic standard and advanced reporting.pdf
SimoneTitaniumTomase
 
PA Analog/Digital System: The Backbone of Modern Surveillance and Communication
AVTRON Technologies LLC
 
Review of recent advances in non-invasive hemoglobin estimation
IAESIJAI
 
Build a system with the filesystem maintained by OSTree @ COSCUP 2025
Jian-Hong Pan
 
Chapter 3 Spatial Domain Image Processing.pdf
Getnet Tigabie Askale -(GM)
 
Electronic commerce courselecture one. Pdf
OmerMohamed64
 
Modernizing your data center with Dell and AMD
Principled Technologies
 
Mobile App Security Testing_ A Comprehensive Guide.pdf
flufftailshop
 
Encapsulation theory and applications.pdf
gurumoop
 
Reach Out and Touch Someone: Haptics and Empathic Computing
Mark Billinghurst
 

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