Lit it up!

Re-use WebComponents and JS libraries shipped with TYPO3

What is Lit?

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

... 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>

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);

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');