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