A dialog behind
a public reference.

Outside command, private dialog, internal close handler.

<button id="dc-show" type="button" commandfor="dc-host"
    command="show-modal">Show modal</button>
<rt-closed-dialog-demo id="dc-host"></rt-closed-dialog-demo>

// Run component code after any fallback setup has finished.
const host = document.getElementById('dc-host');
const root = host.attachShadow({
  mode: 'closed', referenceTarget: 'dc-dialog',
});
root.innerHTML = `
  <dialog id="dc-dialog" aria-labelledby="dc-dialog-title">
    <h2 id="dc-dialog-title">A moment of focus</h2>
    <button id="dc-internal-close" type="button">Close dialog</button>
  </dialog>
`;
const dialog = root.getElementById('dc-dialog');
root.getElementById('dc-internal-close').addEventListener('click', () => {
  dialog.close('closed-inside');
});