→ Slide 1

Lit it up!

Re-use WebComponents and JS libraries shipped with TYPO3

→ Slide 2

What is Lit?

A small wrapper around the WebComponents standard
Lit enables you to write WebComponents in a convenient and productive way

→ Slide 3

... and what are WebComponents?

In short:

WebComponents allow you to define/invent your own custom HTML elements.

For example:

<typo3-surfcamp year="2026"></typo3-surfcamp>

→ Slide 4

WebComponent example

import {LitElement, html} from 'lit';
 
export class Typo3Surfcamp extends LitElement {
    static properties = {
        year: {type: Number, attribute: 'year'},
    };
 
    constructor() {
        super();
        this.year = 0;
    }
 
    render() {
        return html`<div>TYPO3 SurfCamp ${this.year}`;
    }
}
 
customElements.define('typo3-surfcamp', Typo3Surfcamp);

→ Slide 5

Load the WebComponent

Load a single component:

$this->pageRenderer->loadJavaScriptModule('@ochorocho/lit-demo/component/typo3-surfcamp.js');

Load multiple components with a single entry point:

$this->pageRenderer->loadJavaScriptModule('@ochorocho/lit-demo/app.js');