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.