IT-lexikon › Web › Declarative Shadow DOM

Declarative Shadow DOM

Web In English → Uppdaterad: 2026-05-30

Ett sätt att skapa Shadow DOM direkt i HTML-markup (via <template shadowrootmode="open">) i stället för enbart via JavaScript. Det löste det stora hindret för att server-rendera web components: utan det kunde shadow DOM bara skapas med JS i webbläsaren.

Problem: Shadow DOM (inkapslingen i web components) skapades traditionellt bara med JS (attachShadow()) → en server kunde inte rendera en web components inkapslade innehåll i förväg, så de var blanka tills JS körts (dåligt för SSR, prestanda och SEO). Declarative Shadow DOM gör inkapslingen uttryckbar direkt i den serverskickade HTML:en: en <template shadowrootmode> inuti elementet blir automatiskt dess shadow root när webbläsaren parsar sidan — inget JS behövs för att etablera inkapslingen. Vinst: web components kan nu server-renderas och streamas, syns direkt, och hydreras sedan. Det var den saknade pusselbiten för att göra web components praktiska i SSR-världen. Stöds brett sedan ~2023-2024. Hör ihop med web components och streaming SSR.

← Tillbaka till lexikonet