{"version":"1.0","type":"rich","title":"Dice - Shadow DOM","description":"A custom element named `roll-dice` demonstrates the Shadow DOM, rendering a button and an `aria-live` message region within a closed shadow root. The component shuffles an array of dice values and displays the result on click, using the `attachShadow()` API and custom element lifecycle callbacks. External styling applies CSS custom properties and `::part(btn)` selectors to alter the button’s appearance, including a lurid variant. The example shows how Shadow DOM encapsulates structure while enabling targeted style customization through exposed parts.","provider_name":"VizHub AI Studio","provider_url":"https://next.vizhub.com","html":"<iframe src=\"https://next.vizhub.com/viz/gist-738d04f0eb7b2c7cb37f969ceb02428c?mode=embed\" width=\"960\" height=\"500\" scrolling=\"no\" frameborder=\"1\"></iframe>","width":960,"height":500,"cache_age":3600}