typo3-webcomponents

# TYPO3 Web Components > Source: https://github.com/dirnbauer/webconsulting-skills Use this skill for TYPO3 v14 backend programming with standards-based Web Components and Lit. Treat v14 as the only compatibility target: do not add TYPO3 12/13 fallbacks unless the user explicitly asks for a migration note, and verify current v14 APIs in the official TYPO3 docs before implementing. This skill was created from the Anthropic-style skill-creator workflow and follows progressive disclosure: keep the top-level workflow short, then read the focused references when code or review depth is needed. ## Related Local Skills Use these nearby TYPO3 skills together when the task touches their domain: - `typo3-datahandler`: backend UI triggers record creation, update, move, delete, localization, workspace publishing, or any TCA-managed write. - `typo3-workspaces`: the component displays or mutates draft/live state, staged records, publish actions, overlays, or workspace previews. - `typo3-visual-editor`: the task involves inline editing, content-area rendering, or the Visual Editor context panel. - `typo3-vite`: frontend bundling, frontend Web Components, production asset hashing, or external build pipelines are required. - `typo3-testing`: add Playwright, acceptance, or backend module tests for interactive components. - `typo3-translations`: add XLIFF labels, imported label modules, or localized backend strings. ## Concepts Web Components are browser standards for custom reusable HTML elements. The usual building blocks are Custom Elements, Shadow DOM, and templates/slots. A component can appear in markup like `<vendor-status-card></vendor-status-card>` and the browser connects it to a JavaScript class. TYPO3 backend Web Components are custom elements used inside the authenticated TYPO3 backend. TYPO3 v14 uses ES modules, import maps, `@typo3/*` module identifiers, backend module configuration, FormEngine/Form Editor JavaScript, and Lit-based components for parts of the backend UI. The right model is "small interactive backend UI islands", not a separate SPA unless the backend feature genuinely needs one. Lit is a small library on top of Web Components. In the TYPO3 backend, prefer Lit when the element has reactive state, templated rendering, repeated DOM updates, slots, or a reusable public API. Use plain vanilla JavaScript for tiny one-off behavior where a custom element would be ceremony. ## Frontend Decision Answer frontend questions precisely: - Do Web Components work in the TYPO3 frontend? Yes, they are browser standards. - Do TYPO3 backend Web Components and `@typo3/*` backend modules belong in the frontend? No by default. They are backend infrastructure for authenticated backend pages. - Should a project use Lit/Web Components in the frontend? No by default. Use them only when a reusable interactive island or framework-neutral design-system component is worth the extra dependency/build/runtime contract. Otherwise use semantic HTML, CSS, and small vanilla modules. - If Lit is used in the frontend, bundle it through the frontend build pipeline, for example Vite. Do not assume the TYPO3 backend import map, `top.TYPO3`, backend CSS, or backend component modules exist in frontend requests. ## Default Workflow 1. Confirm the task is TYPO3 v14 backend work. If it is frontend work, apply the frontend decision above and use `typo3-vite` when bundling is needed. 2. Inspect the extension shape before coding: `Configuration/JavaScriptModules.php`, `Resources/Public/JavaScript`, backend module controllers, Fluid templates, `Configuration/Backend/Modules.php`, `Configuration/Backend/AjaxRoutes.php`, and Form Framework YAML if relevant. 3. Prefer existing TYPO3 backend APIs and components before writing new components. Search current sources for `@customElement(` and verify whether a component is meant to be reused. 4. Choose the smallest viable rendering path: - Static backend template plus one small custom element for local interaction. - Lit component when reactive state or repeated DOM rendering matters. - Existing Core or extension Web Component when it has a documented or stable enough public contract. - Backend module `component` or `navigationComponent` only when the module shell itself needs a component. 5. Register ES module imports in `Configuration/JavaScriptModules.php`. Use absolute import-map identifiers such as `@vendor/my-extension/backend/status-card.js`; avoid relative imports in TYPO3-loaded modules. 6. Load modules through `PageRenderer->loadJavaScriptModule()` in controllers or `<f:asset.module identifier="..."/>` in Fluid. Do not add inline scripts for backend component bootstrapping. 7. Pass small scalar configuration via attributes. For larger or privileged data, generate a backend route URL in PHP and let the component fetch it with `@typo3/core/ajax/ajax-request.js`. 8. Keep backend writes server-side and permission-checked. Use `DataHandler` for TCA-managed records and configure `inheritAccessFromModule` on related AJAX routes. 9. Validate UX with a real backend user, not only admin. Check keyboard access, focus behavior, reduced-motion tolerance, loading/error/empty states, and permissions. ## References Read `references/examples-and-howtos.md` when implementing code. It includes import maps, Lit components, Fluid loading, AJAX routes, Form Editor modernization, and reusable component examples. Read `references/checklists.md` when reviewing or migrating code. It includes dos and donts, speed guidance, security/accessibility checks, source links, and the related-skill comparison. ## Speed Notice Lit is fast and small, but it does not make inefficient code fast. Keep `render()` pure and cheap; compute expensive derived data outside render, debounce high-frequency input, replace arrays/objects instead of mutating them in place, abort stale fetches, cache server results where appropriate, and lazy-load backend modules only on pages that need them. In TYPO3 v14 frontend asset concatenation/compression was removed from Core, so frontend production assets need an external build tool. Backend ES modules are import-mapped and loaded on demand; still avoid shipping large backend bundles to every module. ## Source Baseline Use these sources when refreshing facts: - Official TYPO3 docs: ES modules/import maps, backend modules, AssetCollector and `f:asset.module`, backend AJAX, Form Editor, and v14 changelogs. - Camino: Camp Vienna "Lit it Up!" by ochorocho: `https://dev.ochorocho.dev/camp-vienna#/`. - Demo extension: `https://github.com/ochorocho/lit_demo`. - Lit docs: `https://lit.dev/`. - MDN Web Components reference: `https://developer.mozilla.org/en-US/docs/Web/API/Web_components`. Special thanks to ochorocho for the Camp Vienna material and `lit_demo` examples that informed the practical TYPO3 backend Lit patterns in this skill.