{"version":"1.0","type":"rich","title":"Dice - Web Component","description":"This example demonstrates a custom web component that renders a dice-rolling button and an accessible output area. The component, defined as `roll-dice`, uses the `HTMLElement` class and the `customElements.define` API to encapsulate its template, which includes a button with customizable text and a `div` with an `aria-live` attribute for screen-reader announcements. The component dynamically replaces its original content with this structure upon instantiation, supporting multiple instances on a page. No dice-rolling logic is implemented; only the component’s markup and lifecycle setup are shown.","provider_name":"VizHub AI Studio","provider_url":"https://next.vizhub.com","html":"<iframe src=\"https://next.vizhub.com/viz/gist-a8958f40576be45914c63d0ab0df5255?mode=embed\" width=\"960\" height=\"500\" scrolling=\"no\" frameborder=\"1\"></iframe>","width":960,"height":500,"cache_age":3600}