Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Shadow dialog example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Dialog element and shadow DOM example</title>
</head>
<body>
<button>Focusable button</button>
<button class="modal-button">Click to open modal dialog</button>
<button>Another focusable button</button>
<dialog>
<div>
<button>Light button</button>
<open-shadow></open-shadow>
<button>Another light button</button>
</div>
<video controls src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.webm"></video>
<div>
<button>Light button</button>
<closed-shadow></closed-shadow>
<button>Another light button</button>
</div>
</dialog>
<script>
class ClosedShadow extends HTMLElement {
constructor () {
super()
const shadow = this.attachShadow({ mode: 'closed' })
shadow.innerHTML = '<button>Closed shadow button!</button>'
}
}
class OpenShadow extends HTMLElement {
constructor () {
super()
const shadow = this.attachShadow({ mode: 'open' })
shadow.innerHTML = '<button>Open shadow button!</button>'
}
}
customElements.define('closed-shadow', ClosedShadow)
customElements.define('open-shadow', OpenShadow)
document.querySelector('.modal-button').addEventListener('click', () => {
document.querySelector('dialog').showModal()
})
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment