nolanlawson/index.html

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