Differences

This shows you the differences between two versions of the page.

--- lit-it-up [2026/04/04 10:36] – admin
+++ lit-it-up [2026/04/04 12:05] (current) – admin
@@ Line 3: / Line 3: @@
 ====== Lit it up! ======
-Use JavaScript shipped with TYPO3
+Re-use WebComponents and JS libraries shipped with TYPO3
 {{ ::extension.svg?width=200px |}}
+====== 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:**
+<code html>
+<typo3-surfcamp year="2026"></typo3-surfcamp>
+</code>
+====== WebComponent example ======
+<code JavaScript>
+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);
+</code>
+====== Load the WebComponent ======
+Load a single component:
+<code php>
+$this->pageRenderer->loadJavaScriptModule('@ochorocho/lit-demo/component/typo3-surfcamp.js');
+</code>
+Load multiple components with a single entry point:
+<code php>
+$this->pageRenderer->loadJavaScriptModule('@ochorocho/lit-demo/app.js');
+</code>