| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <title>Custom Button with Overlapping Shadow DOM</title> |
| <style> |
| #clickable { |
| width: 150px; |
| height: 50px; |
| cursor: pointer; |
| user-select: none; |
| } |
| </style> |
| </head> |
| <body> |
| <div id="clickable" role="button" tabindex="0" aria-label="clickable">Host</div> |
| <script> |
| let button_clicked = false; |
| |
| const hostButton = document.getElementById('clickable'); |
| const shadowRoot = hostButton.attachShadow({ mode: 'open' }); |
| const overlappingDiv = document.createElement('div'); |
| overlappingDiv.textContent = 'This is the Shadow DOM'; |
| |
| const style = document.createElement('style'); |
| style.textContent = ` |
| /* This CSS is encapsulated within the shadow DOM */ |
| div { |
| width: 100% |
| height: 100%; |
| cursor: pointer; |
| box-sizing: border-box; |
| } |
| `; |
| shadowRoot.appendChild(style); |
| shadowRoot.appendChild(overlappingDiv); |
| |
| hostButton.addEventListener('click', () => { |
| button_clicked = true; |
| }); |
| </script> |
| |
| </body> |
| </html> |
