Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Get started with Lit

Get started with Lit

Hardik Pithva

October 22, 2019
Tweet

More Decks by Hardik Pithva

Other Decks in Technology

Transcript

  1. • Set of web platform APIs • Specifications: ◦ Custom

    Elements ◦ Shadow DOM ◦ ES Modules ◦ Template Web Components
  2. 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 <front-mania-drawer></front-mania-drawer> index.html
  3. Front-Mania Drawer Element @hardikpthv class FrontManiaDrawer extends HTMLElement { constructor()

    { super(); ... } connectedCallback() { ... } disconnectedCallback() { ... } attributeChangedCallback(attrName, oldVal, newVal) { ... } } front-mania-drawer.js
  4. • 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.)
  5. Custom Element with Shadow DOM @hardikpthv class FrontManiaDrawer extends HTMLElement

    { constructor() { super(); const shadowRoot = this.attachShadow({mode: 'open'}); shadowRoot.innerHTML = ` <style>#tabs { ... }</style> <!-- Scoped style--> <div id="logo">...</div> <div id="speakers">...</div> `; } ... } front-mania-drawer.js
  6. • 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`<h1>Welcome to ${eventName}</h1>`; // Render the template to the document render(eventTemplate('FrontMania'), document.body); index.js
  7. Example (cont’d) @hardikpthv (eventName) => html`<h1>Welcome to ${eventName}</h1>`; TEMPLATE <h1>Welcome

    to {{}}</h1> PARSED <h1>Welcome to</h1> PARSED Joins all the literal parts with a special placeholder, similar to "{{}}" Creates a `<template>`
  8. • 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
  9. Front-Mania Drawer as LitElement @hardikpthv import { LitElement, html }

    from 'lit-element'; class FrontManiaDrawer extends LitElement { render(){ return html` <h1>2019 FrontMania</h1> <!-- template content --> `; } } customElements.define('front-mania-drawer', FrontManiaDrawer); front-mania-drawer.js
  10. 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
  11. 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