Differences

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

--- lit-it-up [2026/04/04 11:19] – admin
+++ lit-it-up [2026/04/04 12:05] (current) – admin
@@ Line 19: / Line 19: @@
 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>