Popover nested escape example

HTML

<button class="open">open dialog</button>

<dialog class="dialog">
  <h2>Hi I'm a dialog</h2>
  <p>try closing me with escape</p>
  <button popovertarget="popover">open popover</button>
  <div popover id="popover">Some popover content, try closing me with escape</div>
</dialog>

JavaScript

const btn = document.querySelector('.open');
const dialog = document.querySelector('.dialog');

btn.addEventListener('click', () => {
	dialog.showModal();
});

document.body.addEventListener('keydown', (ev) => {
	if (ev.key === 'Escape') {
	  dialog.close();
  }
});