{"version":"1.0","type":"rich","title":"Dice - Shadow DOM","description":"A custom `<roll-dice>` element displays a button labeled \"Roll a D6\" and a live region for results. Clicking the button shuffles a fixed array of numbers 1 through 6 and reports the first value as the roll outcome. The example demonstrates the Shadow DOM API, using `attachShadow` with a closed mode, a `<slot>` for the button label, and private class fields for encapsulation. It also relies on the Custom Elements lifecycle callbacks `connectedCallback` and `disconnectedCallback` to manage event listeners.","provider_name":"VizHub AI Studio","provider_url":"https://next.vizhub.com","html":"<iframe src=\"https://next.vizhub.com/viz/gist-5c3580d1ff17f394f6bfec66b33db630?mode=embed\" width=\"960\" height=\"500\" scrolling=\"no\" frameborder=\"1\"></iframe>","width":960,"height":500,"cache_age":3600}