Fable 5.1 turned one sentence into an interactive shadow DOM lesson

Simon Willison published an interactive tool explaining shadow roots on September 23. According to his note, the prompt to Fable 5.1 Medium was a single sentence asking it to build an artifact that explains CSS shadow roots with interactive examples.

One prompt produced five connected demonstrations

The resulting page covers style encapsulation, inheritance, slots, parts and JavaScript access. Readers see the regular DOM beside an open shadow root and can observe which styles cross the boundary. Other sections explain attachShadow(), ::slotted(), :host and ::part() through working elements.

The source does not document follow up prompts, manual corrections or the time required to finish the artifact. That means the published prompt and result can be inspected, while the precise division of labor between model and author cannot.

Documentation becomes a small experimental environment

Shadow DOM is difficult because learners must track two trees, CSS boundaries and exceptions involving slots or parts. The artifact keeps the explanation, code and rendered consequence on one screen. It shortens the loop between reading a rule and testing what that rule does.

That format is the useful signal for documentation teams. An LLM does not have to produce another paragraph. It can cheaply build a disposable simulator for a concept whose relationships are obscured by a static image or an isolated snippet.

A working demo does not guarantee a correct lesson

A visually convincing artifact can still contain a wrong edge case, outdated browser behavior or an example that works only in one arrangement. Technical education still requires review against the specification and tests in multiple browsers. A short prompt does not remove that editorial work.

Citations and tests will show whether the format matures

The next signal is whether similar artifacts cite sources for individual claims, add automated tests and remain easy to update as the platform changes. With those properties they can complement documentation as maintained tools, rather than survive as impressive one off pages.

Lilith's verdict

Instead of another diagram, Willison put down a small playground where readers can touch the shadow DOM boundary themselves. Add source labels and tests, and the exhibit can become a teaching instrument.