Web Components i Lit

Co to są Web Components i jakie standardy je tworzą?

Web Components: standard W3C. Natywne komponenty przeglądarki. Bez żadnego frameworka. Zestaw 3 standardów: Custom Elements: definiuj własne HTML tagi. class MyButton extends HTMLElement {connectedCallback() {this.innerHTML = 'button'}}. customElements.define('my-button', MyButton). Używaj: my-button w HTML. Shadow DOM: enkapsulacja DOM i CSS. const shadow = this.attachShadow({mode: 'open'}). CSS wewnątrz Shadow DOM nie wycieka na zewnątrz. Zewnętrzny CSS nie przenika do środka. HTML Templates: template id='my-template'. Zawartość nie renderowana do czasu klonowania. const template = document.querySelector('#my-template'). const clone = template.content.cloneNode(true). Lifecycle callbacks: connectedCallback() — element dodany do DOM. disconnectedCallback() — element usunięty. attributeChangedCallback(name, old, new) — atrybut zmieniony. observedAttributes — które atrybuty obserwować. adoptedCallback() — przeniesiony do innego dokumentu. Slots: slot name='header' — nazwane sloty. slot — domyślny slot. Kompozycja zawartości z zewnątrz. CSS Custom Properties (CSS Variables): :host — styl elementu. :host(:hover). ::slotted(span) — style slottowanej zawartości. CSS parts: part='button' -> ::part(button) do stylowania z zewnątrz. Interoperability: React 18 + Web Components — ograniczone. React 19 — pełne wsparcie dla Custom Events. Preact + Web Components — doskonałe.

Lit — biblioteka do Web Components od Google?

Lit (Google, 2021, poprzednik: LitElement/lit-html): lekka biblioteka do Web Components. Reactive properties. Templating z lit-html (tagged templates). ~5KB gzipped. TypeScript-first. Instalacja: npm install lit. Podstawowy komponent: import {LitElement, html, css} from 'lit'. import {customElement, property} from 'lit/decorators.js'. @customElement('my-card'). class MyCard extends LitElement {static styles = css .card {border: 1px solid #ccc; padding: 16px} (backtick). @property({type: String}) title = ''. @property({type: Number}) count = 0. render() {return html div class='card' h2 ${this.title} /h2 button @click=${this.increment} Count: ${this.count} /button /div (template literal notation)}}. Reactive updates: @property() -> automatyczny re-render. @state() — wewnętrzny stan (nie atrybut). Tasks: @lit/task — async data fetching. Lit Context: @lit/context — jak React Context dla Web Components. Lit Labs: lit/labs — eksperymentalne features. Shoelace (teraz Web Awesome): dojrzała biblioteka Web Components oparta na Lit. UI komponenty: sl-button, sl-input, sl-select, sl-dialog. Framework-agnostic. Używany z React, Vue, Angular, Vanilla. Open UI: inicjatywa standaryzacji UI. Stylable Select, Popover API, Anchor Positioning. Popover API: popover atrybut na elementach. button popovertarget='my-popover'. Natywne popovery bez JavaScript. Dostępne w wszystkich major browsers 2024.

Web Components vs React/Vue — kiedy wybrać Web Components?

Kiedy Web Components: design system dla wielu frameworków. Organizacja z wieloma tech stacks (React + Vue + Angular). Long-term stability (standard, nie biblioteka). Mikrofrontendy z różnymi frameworkami. Browser native — zero dependencies. Widget embeddowany na zewnętrznych stronach. Kiedy React/Vue zamiast: complex state management. Ecosystem i biblioteki. Team doświadczenie. SEO (Web Components i SSR — trudniejsze). Szybki development. React + Web Components: React 18 — słabe event handling dla custom events. React 19 — naprawione: pełne wsparcie custom events i props. @lit-labs/react: ReactWebComponent(). Wrap Web Component jako React komponent. Preact + Web Components: Preact — doskonała kompatybilność z Web Components. Mały bundle (~3KB). Używany zamiast React w środowiskach z WC. Stencil.js: kompilator do Web Components. Pisze się jak React (JSX, props, state). Kompiluje do natywnych Custom Elements. Ionic Framework oparty na Stencil. Angular Elements: Angular komponenty -> Web Components. @angular/elements. Dobra integracja z Angular ekosystemem. Custom Event pattern (zamiast callback props): this.dispatchEvent(new CustomEvent('my-event', {detail: {value: this.value}, bubbles: true, composed: true})). composed: true — przechodzi przez Shadow DOM boundary. Web Components w React (workaround): useRef + addEventListener zamiast onMyEvent prop. React 19 eliminuje ten problem.

Micro-frontends z Web Components i Module Federation?

Micro-frontends: podział dużego frontend na niezależne aplikacje. Każdy team ma własny tech stack. Niezależne deploymenty. Integracja w runtime. Podejścia: iframe — najprostsze ale ograniczone. Web Components — standard, framework-agnostic. Module Federation (Webpack 5) — JavaScript modules sharing. Single SPA — orchestration framework. Web Components jako micro-frontends: każdy micro-frontend eksponuje Web Component. Host page ładuje zdalny bundle. Rejestruje custom element. Używa w HTML. Module Federation (Webpack 5): exposes — eksponuj moduły. remotes — ładuj z innych app. Shared — dziel React, lodash bez duplikacji. Dynamic import: const RemoteApp = React.lazy(() => import('remote/App')). @module-federation/enhanced: ulepszone MF. Runtime plugins. Vite: vite-plugin-federation. Single SPA: registerApplication(). mountRootParcel(). Routing między micro-frontends. Framework-agnostic loader. Native Federation: ES Modules bez Webpack. @angular-architects/native-federation. Oparty na importmaps. Problem współdzielenia stanu: Custom Events między WC. BroadcastChannel API. Shared store (Zustand singleton). URL jako shared state. Wyzwania: CSS isolation — Shadow DOM lub CSS Modules. Auth — shared token, single SSO. Performance — wiele bundle requests. Versioning — shared libraries. Design System — Web Components jako standard. Kiedy micro-frontends: duże organizacje, wiele teams. Kiedy NIE: małe projekty, jeden team.

Declarative Shadow DOM i SSR dla Web Components?

Problem SSR z Web Components: Shadow DOM tworzony przez JavaScript. Server nie może renderować Shadow DOM. Brak hydration mechanism. Declarative Shadow DOM (DSD): shadowrootmode='open' atrybut na template. template shadowrootmode='open' — Shadow DOM bez JS. Obsługiwany natywnie: Chrome, Edge, Safari (od 2023). Firefox: planowany. Polyfill: @webcomponents/template-shadowroot. Lit SSR (@lit-labs/ssr): renderowanie Lit Web Components na serwerze. render(html my-element, createEmptyDomImplementation()). Generuje Declarative Shadow DOM. Hydration po stronie klienta: LitElement.enableUpdatingWithoutShadow(). Albo standard LitElement hydration. Gatsby + Web Components: gatsby-plugin-lit. Prerender z Lit SSR. Astro + Web Components: Astro doskonały dla Web Components. server:true — Server Components. client:load — hydrate po stronie klienta. client:idle, client:visible — lazy hydration. Web Components w Astro: import 'my-component/define'. Używaj normalnie. Astro automatycznie bundluje. Framework-agnostic: Web Components działają w Astro z React, Vue, Svelte, Solid, Angular. Interoperability test: custom-elements-everywhere.com. Score dla każdego frameworka. React 18: 70%. React 19: 100%. Preact: 100%. Vue: 100%. Angular: 99%. Svelte: 100%. Solid: 100%. Custom Elements Manifest: schema dla dokumentacji i tooling. @custom-elements-manifest/analyzer. IDE support (VSCode extension). Storybook 8 + Web Components: Storybook wspiera natywnie WC. argTypes, args dla @property. Controls panel.

Wyślij zapytanie