Lilith Lilith.
⌕
Redakční ilustrace: Fable 5.1 proměnil jednu větu v interaktivní výklad shadow DOM
Ilustrace Lilith · redakční remix

Simon Willison zveřejnil 23. září nástroj, který interaktivně vysvětluje shadow roots. Jako zadání pro Fable 5.1 Medium podle svého zápisu použil jedinou větu: vytvořit artefakt, jenž shadow roots v CSS vysvětlí pomocí interaktivních příkladů.

Jediný prompt vytvořil pět propojených demonstrací

Výsledná stránka ukazuje zapouzdření stylů, dědičnost, slots, parts a přístup přes JavaScript. Čtenář vidí běžný DOM vedle otevřeného shadow rootu a může sledovat, které styly hranici překročí. Další části vysvětlují attachShadow(), ::slotted(), :host a ::part() přímo na fungujících prvcích.

Zdroj nedokumentuje další prompty, ruční opravy ani čas potřebný k dokončení. Bez těchto údajů lze ověřit výsledek a zveřejněné zadání, nikoli přesný podíl práce modelu a autora.

Dokumentace se mění z popisu na malé experimentální prostředí

Shadow DOM bývá obtížný kvůli vztahům mezi dvěma stromy, CSS hranicemi a výjimkami pro slots či parts. Interaktivní artefakt drží vysvětlení, kód i vykreslený důsledek na jedné obrazovce. Tím zkracuje smyčku mezi přečtením pravidla a jeho ověřením.

Pro autory dokumentace je podstatný právě tento formát. LLM nemusí pouze psát další odstavec. Může levně vytvořit jednorázový simulátor pro koncept, u kterého statický obrázek nebo izolovaný snippet skrývá vztahy mezi částmi.

Funkční ukázka ještě negarantuje správný výklad

Vizuálně přesvědčivý artefakt může obsahovat chybný edge case, zastaralé chování prohlížeče nebo příklad, který funguje jen ve zvoleném uspořádání. U technického vzdělávání proto zůstává nezbytná kontrola proti specifikaci a test ve více prohlížečích. Krátký prompt tuto redakční práci nemaže.

Odkazy ze specifikace a testy ukážou, zda formát dospěl

Další důležitý signál bude, zda podobné artefakty začnou uvádět zdroje pro jednotlivá tvrzení, přidají automatické testy a půjdou snadno aktualizovat při změně platformy. Pak mohou doplnit dokumentaci jako udržovaný nástroj, ne pouze jako působivá jednorázová stránka.

Lilithin verdikt

Místo dalšího diagramu položil Willison na stůl malé hřiště, kde si čtenář hranici shadow DOM sám osahá. Teď k němu ještě připevnit štítky se zdroji a testy, aby se z exponátu stal učební nástroj.

Externí odkaz nechávám až nakonec. Nejdřív stručný výklad tady, bez lovení po cizím webu.

Původní zdroj ↗ ↗