Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="Dialog and content in different DOM scopes">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Dialog and content in different DOM scopes</title>
</head>
<body>
​
  <h1>Dialog element, focusing content, form method="dialog" behavior</h1>
​
  <p>The first focusable element (or the dialog itself) should be focused when the dialog is opened, and focus should move inside the dialog with the tab key.</p>
​
  <p>Clicking the "close" button should close the dialog (due to <code>method="dialog"</code>).</p>
​
  <h2>Everything in light DOM:</h2>
  <button id="open-light">open dialog</button>
  <dialog id="light">
    <form method="dialog">
      <button>close</button>
    </form>
  </dialog>
​
​
  <h2>Dialog in light DOM, content in shadow DOM:</h2>
  <button id="open-light2">open dialog</button>
  <dialog id="light2">
    <x-bar></x-bar>
  </dialog>
​
​
  <h2>Everything in shadow DOM:</h2>
  <x-foo></x-foo>
​
​
  <h2>Dialog in shadow DOM, content slotted from light DOM:</h2>
  <x-foo>
    <form method="dialog">
      <button>close</button>
    </form>
  </x-foo>
​
</body>
</html>
 
document.querySelector('#open-light').onclick = () => {
  document.querySelector('#light').showModal();
}
​
document.querySelector('#open-light2').onclick = () => {
  document.querySelector('#light2').showModal();
}
​
customElements.define('x-foo', class extends HTMLElement {
  connectedCallback() {
    this.attachShadow({mode: 'open'});
    this.shadowRoot.innerHTML = `
      <button id="open">open dialog</button>
      <dialog>
        <slot>
          <form method="dialog">
            <button>close</button>
          </form>
        </slot>
      </dialog>`;
    this.shadowRoot.querySelector('#open').onclick = () => {
      this.shadowRoot.querySelector('dialog').showModal();
    }
  }
});
​
customElements.define('x-bar', class extends HTMLElement {
  connectedCallback() {
    this.attachShadow({mode: 'open'});
    this.shadowRoot.innerHTML = `
      <form method="dialog">
        <button>close</button>
      </form>`;
  }
});
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
jounipro
0viewers