<commit_before>dialog-polyfill.js is a polyfill for `<dialog>`.

`<dialog>` is an element for a popup box in a web page. See
[more information and demos](http://falken-testing.appspot.com/dialog/index.html)
and the
[HTML spec](http://www.whatwg.org/specs/web-apps/current-work/multipage/commands.html#the-dialog-element).

## Usage

### Installation

You may optionally install via Bower-

    $ bower install dialog-polyfill

### Supports

This polyfill works on modern versions of all major browsers. It also supports IE9 and above.

## Example

```html
<head>
  <script src="dialog-polyfill.js"></script>
  <link rel="stylesheet" type="text/css" href="dialog-polyfill.css" />
</head>
<body>
  <dialog>I'm a dialog!</dialog>
  <script>
    var dialog = document.querySelector('dialog');
    dialogPolyfill.registerDialog(dialog);
    // Now dialog acts like a native <dialog>.
    dialog.showModal();
  </script>
</body>
```

### ::backdrop

In native `<dialog>`, the backdrop is a pseudo-element:

```css
#mydialog::backdrop {
  background-color: green;
}
```

When using the polyfill, the backdrop will be an adjacent element:

```css
#mydialog + .backdrop {
  background-color: green;
}

#mydialog::backdrop {
  background-color: green;
}
```

## Limitations

- Modality isn't bulletproof. For example, `accessKey` can be used to focus inert elements.
  - While focus is inside a `<dialog>`, the browser's chrome cannot be tabbed to.
- The polyfill `<dialog>` should always be a child of `<body>`.
- Polyfill top layer stacking can be ruined by playing with z-index.
- The polyfill `<dialog>` does not retain dynamically set CSS top/bottom values
upon close.
- Anchored positioning is not implemented. The native `<dialog>` in Chrome
doesn't have it either.<commit_msg>clarify modal limitations<commit_after>dialog-polyfill.js is a polyfill for `<dialog>`.

`<dialog>` is an element for a popup box in a web page. See
[more information and demos](http://falken-testing.appspot.com/dialog/index.html)
and the
[HTML spec](http://www.whatwg.org/specs/web-apps/current-work/multipage/commands.html#the-dialog-element).

## Usage

### Installation

You may optionally install via Bower-

    $ bower install dialog-polyfill

### Supports

This polyfill works on modern versions of all major browsers. It also supports IE9 and above.

## Example

```html
<head>
  <script src="dialog-polyfill.js"></script>
  <link rel="stylesheet" type="text/css" href="dialog-polyfill.css" />
</head>
<body>
  <dialog>
    I'm a dialog!
    <form method="dialog">
      <input type="submit" value="Close" />
    </form>
  </dialog>
  <script>
    var dialog = document.querySelector('dialog');
    dialogPolyfill.registerDialog(dialog);
    // Now dialog acts like a native <dialog>.
    dialog.showModal();
  </script>
</body>
```

### ::backdrop

In native `<dialog>`, the backdrop is a pseudo-element:

```css
#mydialog::backdrop {
  background-color: green;
}
```

When using the polyfill, the backdrop will be an adjacent element:

```css
#mydialog + .backdrop {
  background-color: green;
}

#mydialog::backdrop {
  background-color: green;
}
```

## Limitations

- Modal dialogs have limitations-
  - The browser's chrome may not be accessible via the tab key
  - They should be a child of `<body>` or have parents without layout (aka, no position `absolute` or `relative` elements)
  - Stacking can be ruined by playing with z-index
  - Changes to the CSS top/bottom values while open aren't retained

- Anchored positioning is not implemented, but the native `<dialog>` in Chrome doesn't have it either
{'fraction_non_alphanumeric': 0.12962447844228095, 'fraction_numerical': 0.0005563282336578582, 'mean_word_length': 4.0862800565770865, 'pattern_counts': {'":': 0, '<': 43, '<?xml version=': 0, '>': 43, 'https://': 0, 'lorem ipsum': 0, 'www.': 2, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '5658684', 'n_tokens_mistral': 1149, 'n_tokens_neox': 1098, 'n_words': 385}