Other Tags

This chapter introduces some of the latest tags introduced into the standard.

<dialog>

Basic usage

The ``

` tag represents a dialog box that can be closed.

<dialog>Hello world</dialog>

The above is a dialog in its simplest form.

By default, the dialog is hidden and will not be displayed on the page. If you want the dialog to be shown, you must add the open attribute.

<dialog open>Hello world</dialog

The above code will display a box on the web page with the content Hello world.

Inside the ``

` element, you can put other HTML elements.

<dialog open>
  <form method="dialog">
    <input type="text" />
    <button type="submit" value="foo">Submit</button>
  </form
</dialog>

Inside the dialog above, there is an input box and a submit button.

Note that the method`'' attribute of

is set to ``dialog' in the above example, and the dialog will disappear when the submit button is clicked. However, the form will not be submitted to the server, and the browser will set the returnValue property of the form element to the value property of the Submit button (foo in the above example).

JavaScript API

The JavaScript API for the <dialog>` element provides two methods Dialog.showModal() and ``Dialog.close() to open/close the dialog.

const modal = document.querySelector("dialog");

// The dialog is displayed, which is equivalent to adding the open property
modal.showModal();

// the dialog is closed, which is equivalent to removing the open property
modal.close();

The developer can provide a close button to call the Dialog.close() method to close the dialog.

The Dialog.close() method can accept a string as an argument for passing information. The returnValue property of the <dialog>` interface can read this string, otherwise the returnValueproperty is equal to thevalue`` property of the submit button.

modal.close("Accepted");
modal.returnValue; // "Accepted"

The ``Dialog.showModal()method evokes the dialog with a transparent layer that prevents the user from interacting with the content outside the dialog. css provides a::backdrop` pseudo-class for the Dialog element to check this transparent layer, so you can write styles to make the transparent layer visible.

dialog {
  padding: 0;
  border: 0;
  border-radius: 0.6rem;
  box-shadow: 0 0 1em black;
}

dialog::backdrop {
  /* make the backdrop a semi-transparent black */
  background-color: rgba(0, 0, 0, 0.4);
}

The above code not only specifies the style for <dialog>, but also turns the transparent layer of the dialog into a gray transparent one.

The <dialog> element also has a Dialog.show() method that also evokes the dialog, but without the transparent layer, the user can interact with the content outside the dialog.

Events

The <dialog> element has two events that it can listen to.

  • close: triggered when the dialog is closed
  • cancel: triggered when the user presses the esc key to close the dialog

If you want the dialog to be closed when the user clicks on the transparent layer, you can use the following code.

modal.addEventListener("click", (event) => {
  if (event.target === modal) {
    modal.close("cancelled");
  }
});

<details>`, `

Basic usage

The ``

` tag is used to collapse content, and the browser will collapse to display the content of that tag.

<details>This is a piece of explanatory text.</details>

The code above, inside the browser, will collapse to show Details with a triangle in front of it, like the following.

▶ Details

When the user clicks on this text, the collapsed text will be expanded to show the details.

▼ Details This is a paragraph of explanatory text.

Click again, and the expanded text will be collapsed again.

The open attribute of the ``

` tag is used to open the collapsed text by default.

<details open>This is a paragraph of explanatory text.</details>

The above code opens the collapse by default.

The ``

` tag is used to customize the title of the collapsed content.

The ```html

This is the title This is a snippet of explanatory text.
```

The above code displays the following result.

▶ This is the title

After clicking on it, the following result is displayed.

▼ This is the title This is a paragraph of explanation text.

The triangular arrow in front of the title can be changed by setting summary::-webkit-details-marker with CSS.

summary::-webkit-details-marker {
  background: url(https://example.com/foo.svg);
  color: transparent;
}

The following style is another way to replace the arrow.

summary::-webkit-details-marker {
  display: none;
}
summary:before {
  content: "\2714";
  color: #696f7c;
  margin-right: 5px;
}
ðŸ™' ðŸ™'

### JavaScript API

The `open` attribute of the `Details` element returns whether `<details>` is currently open or closed.

```javascript
const details = document.querySelector("details");

if (details.open === true) {
  // Expanded state
} else {
  // collapsed state
}
The ```

The `Details` element has a `toggle` event, which is fired when the collapse is opened or closed.

```javascript
details.addEventListener("toggle", (event) => {
  if (details.open) {
    /* expand status */
  } else {
    /* collapsed status */
  }
});
  • Meet the New Dialog Element, Keith J. Grant
  • [The dialog element: The way to create tomorrow's modal windows](https://blog.logrocket.com/the-dialog-element-the- way-to-create-tomorrows-modal-windows-f1d4ab14380b), Abhishek Jakhar
  • [Details/Summary is the Easiest Way Ever to Make an Accordion](https://css-tricks.com/quick-reminder-that-details-summary-is-the -easiest-way-ever-to-make-an-accordion/), Chris Coyier Translated with www.DeepL.com/Translator (free version)