nolanlawson/index.html

## index.html
<!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>
	<!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>