{
  "@context": "https://schema.org",
  "@id": "https://aggr.aymericbeaumet.com/items/simonwillison-net/2026-09-23-shadow-roots-explained-with-live-examples/#webpage",
  "@type": [
    "WebPage",
    "ArchiveComponent"
  ],
  "articleBody": "[Shadow roots, explained with live examples](https://tools.simonwillison.net/shadow-roots) — Learn about shadow DOM through interactive examples that demonstrate style encapsulation, inheritance, slots, parts, and JavaScript access. Explore how shadow roots create isolated DOM trees with private stylesheets and elements that interact with the page DOM in specific, controlled ways.\n\nPrompt to Fable 5.1 Medium:\n\n> `Build an artifact to explain shadow roots in CSS with interactive examples`\n",
  "authors": [],
  "captured_at": "2026-09-23T22:13:44.124112615+00:00",
  "category": "programming",
  "content_html": "<p><a target=\"_blank\" rel=\"noopener noreferrer\" href=\"https://tools.simonwillison.net/shadow-roots\">Shadow roots, explained with live examples</a> — Learn about shadow DOM through interactive examples that demonstrate style encapsulation, inheritance, slots, parts, and JavaScript access. Explore how shadow roots create isolated DOM trees with private stylesheets and elements that interact with the page DOM in specific, controlled ways.</p>\n<p>Prompt to Fable 5.1 Medium:</p>\n<blockquote>\n<p><code>Build an artifact to explain shadow roots in CSS with interactive examples</code></p>\n</blockquote>\n",
  "content_markdown": "[Shadow roots, explained with live examples](https://tools.simonwillison.net/shadow-roots) — Learn about shadow DOM through interactive examples that demonstrate style encapsulation, inheritance, slots, parts, and JavaScript access. Explore how shadow roots create isolated DOM trees with private stylesheets and elements that interact with the page DOM in specific, controlled ways.\n\nPrompt to Fable 5.1 Medium:\n\n> `Build an artifact to explain shadow roots in CSS with interactive examples`\n",
  "dateCreated": "2026-09-23T22:13:44.124112615+00:00",
  "date_created": "2026-09-23T16:37:18+00:00",
  "date_modified": "2026-09-23T16:37:18+00:00",
  "date_published": "2026-09-23T16:37:18+00:00",
  "description": "Tool: Shadow roots, explained with live examples Prompt to Fable 5.1 Medium: Build an artifact to explain shadow roots in CSS with interactive examples Tags: css",
  "external_url": "https://simonwillison.net/2026/Sep/23/shadow-roots/",
  "git": {
    "commit": "ebb0941c5c06a2ab2377342d607535262a3e969e",
    "path": "items/simonwillison-net/2026/09/2026-09-23-shadow-roots-explained-with-live-examples.md",
    "permalink": "https://github.com/aymericbeaumet/aggr-instance/blob/ebb0941c5c06a2ab2377342d607535262a3e969e/items/simonwillison-net/2026/09/2026-09-23-shadow-roots-explained-with-live-examples.md"
  },
  "id": "urn:aggr:item:08780d4b7727daf3a5bfcba8f8b6ac942f42787d",
  "isBasedOn": {
    "@id": "https://simonwillison.net/2026/Sep/23/shadow-roots/"
  },
  "mainEntity": {
    "@id": "https://simonwillison.net/2026/Sep/23/shadow-roots/",
    "@type": "CreativeWork",
    "archivedAt": {
      "@id": "https://aggr.aymericbeaumet.com/items/simonwillison-net/2026-09-23-shadow-roots-explained-with-live-examples/#webpage"
    },
    "dateModified": "2026-09-23T16:37:18+00:00",
    "datePublished": "2026-09-23T16:37:18+00:00",
    "headline": "Shadow roots, explained with live examples",
    "timeRequired": "PT1M",
    "url": "https://simonwillison.net/2026/Sep/23/shadow-roots/",
    "wordCount": 63
  },
  "name": "Archived snapshot: Shadow roots, explained with live examples",
  "preview": null,
  "reading_minutes": 1,
  "replicated_at": null,
  "source": "simonwillison-net",
  "source_name": "Simon Willison's Weblog",
  "summary": "Tool: Shadow roots, explained with live examples Prompt to Fable 5.1 Medium: Build an artifact to explain shadow roots in CSS with interactive examples Tags: css",
  "tags": [
    "css"
  ],
  "temporalCoverage": "2026-09-23T22:13:44.124112615+00:00",
  "title": "Shadow roots, explained with live examples",
  "url": "https://aggr.aymericbeaumet.com/items/simonwillison-net/2026-09-23-shadow-roots-explained-with-live-examples/",
  "word_count": 63
}