Getting started with Lit #WebComponents Hardik Pithva @hardikpthv #UseThePlatform 

● Set of web platform APIs ● Specifications: ○ Custom Elements ○ Shadow DOM ○ ES Modules ○ Template Web Components 

Custom Elements Shadow DOM - - - LitElement 

Custom Elements 

What is it? ● Create new or extend existing HTML tags ● Create reusable components using nothing more than vanilla JS / HTML / CSS ● Combines the features offered by most modern browsers ● An approach to modernizing HTML @hardikpthv class FrontManiaDrawer extends HTMLElement { ... } window.customElements.define('front-mania-drawer', FrontManiaDrawer); front-mania-drawer.js index.html 

Front-Mania Drawer Element @hardikpthv class FrontManiaDrawer extends HTMLElement { constructor() { super(); ... } connectedCallback() { ... } disconnectedCallback() { ... } attributeChangedCallback(attrName, oldVal, newVal) { ... } } front-mania-drawer.js 

Shadow DOM 

● Problems: ○ Global attitude of HTML, CSS, and JS ○ CSS:!important (specificity) ○ CSS Containment What is it? @hardikpthv ● Shadow DOM is the rescuer: ○ Support for the scoped style ○ Neither tools nor naming conventions ○ Self-contained component ● An option to provide HTML and CSS to your custom element ● Just like a DOM, but not a DOM. (Isolation from DOM tree, although it’s a part of it.) 

Shadow DOM (cont’d) @hardikpthv Isolated DOM Scoped CSS Composition Simplifies CSS 

Custom Element with Shadow DOM @hardikpthv class FrontManiaDrawer extends HTMLElement { constructor() { super(); const shadowRoot = this.attachShadow({mode: 'open'}); shadowRoot.innerHTML = ` #tabs { ... } `; } ... } front-mania-drawer.js 

Who uses the WebComponents!/? 

…and many more 



● HTML templating library for JavaScript (No VDOM) ● Lets you write HTML templates in JavaScript using `template literals` ● Lazily rendered ● Possible to style, bind to attributes, properties, and add event listeners lit-html @hardikpthv // Import lit-html import {html, render} from 'lit-html'; // Define a template const eventTemplate = (eventName) => html`

Welcome to ${eventName}

`; // Render the template to the document render(eventTemplate('FrontMania'), document.body); index.js 

Example (cont’d) @hardikpthv (eventName) => html`

Welcome to ${eventName}

`; TEMPLATE

Welcome to {{}}

PARSED

Welcome to

PARSED Joins all the literal parts with a special placeholder, similar to "{{}}" Creates a `` 

LitElement 

● A simple base class ● Lets you create fast, lightweight web components ● Work in any web page with any framework ● Uses lit-html to render ● Reactive properties, async updates for elements, life cycle hooks. LitElement @hardikpthv import { LitElement, html } from 'lit-element'; class FrontManiaDrawer extends LitElement { render(){ ... } } customElements.define('front-mania-drawer', FrontManiaDrawer); front-mania-drawer.js 

Front-Mania Drawer as LitElement @hardikpthv import { LitElement, html } from 'lit-element'; class FrontManiaDrawer extends LitElement { render(){ return html`

2019 FrontMania

`; } } customElements.define('front-mania-drawer', FrontManiaDrawer); front-mania-drawer.js 

Tool and Best Practices 

OpenWC ● To encourage developers with efficient and futuristic tools ● Set of recommendations and standard practices for: ○ Developing: Dev-server, Scaffold ○ Linting: ESLint, Prettier, Types ○ Testing: Karma, Browserstack, Wallaby ○ Building: Rollup, Webpack ○ Demoing: Storybook ○ Publishing: Netlify ○ Automating: CircleCI @hardikpthv 

OpenWC (cont’d) @hardikpthv npm init @open-wc BEGIN WITH Requires Node 10 or > and NPM 6 or > 



View @ bit.ly/lit-movies 

Compare DX with React 

View @ github.com/react-movies View @ github.com/lit-movies 

Thank You Hardik Pithva @hardikpthv 

Get the content and stay tuned ● Slides @ bit.ly/start-with-lit ● Repo. @ github.com/online-edu/lit-movies ● Demo @ bit.ly/lit-movies ● Follow @ github.com/hardikpthv or speakerdeck.com/hardikpthv ● Resources: ○ open-wc.org ○ lit-element.polymer-project.org ○ lit-html.polymer-project.org