Lilith Lilith.
⌕
Ilustracja redakcyjna: Fable 5.1 zamienił jedno zdanie w interaktywną lekcję shadow DOM
Ilustracja Lilith · remiks redakcyjny

Simon Willison opublikował 23 września interaktywne narzędzie objaśniające shadow roots. Według jego wpisu prompt dla Fable 5.1 Medium składał się z jednego zdania: model miał zbudować artefakt wyjaśniający shadow roots w CSS za pomocą interaktywnych przykładów.

Jeden prompt stworzył pięć powiązanych demonstracji

Gotowa strona pokazuje izolację stylów, dziedziczenie, slots, parts oraz dostęp przez JavaScript. Czytelnik widzi zwykły DOM obok otwartego shadow root i może obserwować, które style przekraczają granicę. Kolejne sekcje objaśniają attachShadow(), ::slotted(), :host i ::part() na działających elementach.

Źródło nie opisuje kolejnych promptów, ręcznych poprawek ani czasu potrzebnego na ukończenie projektu. Można więc sprawdzić opublikowane polecenie i rezultat, lecz nie da się dokładnie ustalić podziału pracy między modelem a autorem.

Dokumentacja staje się małym środowiskiem do eksperymentów

Shadow DOM sprawia trudność, ponieważ trzeba jednocześnie śledzić dwa drzewa, granice CSS i wyjątki dotyczące slots lub parts. Artefakt trzyma objaśnienie, kod i wyrenderowany skutek na jednym ekranie. Skraca drogę od przeczytania reguły do sprawdzenia jej działania.

Dla zespołów dokumentacyjnych właśnie ten format jest najważniejszy. LLM nie musi produkować kolejnego akapitu. Może tanio zbudować jednorazowy symulator pojęcia, którego zależności giną na statycznym obrazie lub w oderwanym fragmencie kodu.

Działające demo nie gwarantuje poprawnej lekcji

Przekonujący wizualnie artefakt nadal może zawierać błędny edge case, nieaktualne zachowanie przeglądarki albo przykład działający tylko w jednym układzie. Materiał techniczny wymaga więc sprawdzenia ze specyfikacją i testów w kilku przeglądarkach. Krótki prompt nie usuwa pracy redakcyjnej.

Cytowania i testy pokażą dojrzałość tego formatu

Warto obserwować, czy podobne artefakty zaczną wskazywać źródła poszczególnych twierdzeń, dodawać testy automatyczne i umożliwiać łatwe aktualizacje po zmianach platformy. Wtedy uzupełnią dokumentację jako utrzymywane narzędzia, zamiast pozostać efektownymi stronami na jeden raz.

Werdykt Lilith

Zamiast kolejnego diagramu Willison postawił mały plac zabaw, na którym czytelnik sam dotyka granicy shadow DOM. Wystarczy dodać tabliczki ze źródłami i testy, by eksponat stał się narzędziem do nauki.

Link zewnętrzny zostawiam na koniec. Najpierw krótkie wyjaśnienie tutaj, bez polowania po cudzej stronie.

Oryginalne źródło ↗ ↗