Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
<video controls> in modal dialog demo
<!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>
<div>
<button>Light button</button>
<closed-shadow></closed-shadow>
<button>Another light button</button>
</div>
<video controls src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.webm"></video>
</dialog>
<button>Focusable button</button>
<button>Focusable button</button>
<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', () => {
const dialog = document.querySelector('dialog')
dialog.showModal()
let lastKeydown
dialog.addEventListener('keydown', event => {
lastKeydown = event
console.log('keydown', event)
})
dialog.addEventListener('focusout', event => {
console.log('focusout', event)
})
})
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment