Skip to content

Instantly share code, notes, and snippets.

@nolanlawson
Last active Jun 14, 2022
Embed
What would you like to do?
Dialog element - repro browser issue with shadow element
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Dialog element and shadow DOM - first element is in a closed shadow root</title>
<style>
body {
margin: 0 auto;
max-width: 400px;
padding: 40px;
}
button:focus {
outline: 4px dashed blue;
outline-offset: -2px;
}
button {
font-size: 1.2em;
padding: 5px;
margin: 5px;
}
</style>
</head>
<body>
<h1>Dialog element and shadow DOM - first element is in a closed shadow root</h1>
<p>After opening the dialog, the focused element should be the one in the closed shadow root.</p>
<button class="modal-button">Click to open modal dialog</button>
<dialog>
<my-component></my-component>
<button>Light button</button>
<script>
customElements.define('my-component', class extends HTMLElement {
constructor() {
super()
const shadow = this.attachShadow({mode: 'open'})
shadow.innerHTML = `
<style>
button:focus {
outline: 4px dashed blue;
outline-offset: -2px;
}
button {
font-size: 1.2em;
padding: 5px;
margin: 5px;
}
</style>
<button>Open shadow button</button>
`
}
})
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