This chapter introduces some recently adopted standard tags.

<dialog>

Basic Usage

The <dialog> tag represents a dialog box that can be closed.

1
2
3
<dialog>
  Hello world
</dialog>

The above code shows a simple dialog box.

By default, the dialog is hidden and does not display on the webpage. To make the dialog visible, you must add the open attribute.

1
2
3
<dialog open>
  Hello world
</dialog>

The above code will display a box on the webpage with the content “Hello world.”

Inside a <dialog> element, you can place other HTML elements.

1
2
3
4
5
6
<dialog open>
  <form method="dialog">
    <input type="text">
    <button type="submit" value="foo">Submit</button>
  </form>
</dialog>

In this example, the dialog contains an input field and a submit button.

Note that in the example above, setting the form’s method attribute to “dialog” means that when the submit button is clicked, the dialog will disappear. However, the form will not be submitted to the server; instead, the browser will set the form element’s returnValue property to the value attribute of the Submit button (in this case, “foo”).

JavaScript API

The <dialog> element provides a JavaScript API with two methods: Dialog.showModal() and Dialog.close(), used to open and close the dialog.

1
2
3
4
5
6
7
const modal = document.querySelector('dialog');

// Display the dialog, equivalent to adding the open attribute
modal.showModal();

// Close the dialog, equivalent to removing the open attribute
modal.close();

You can provide a close button that triggers the Dialog.close() method to close the dialog.

The Dialog.close() method can accept a string parameter to pass information. The returnValue property of the <dialog> interface can read this string. Otherwise, returnValue defaults to the value attribute of the submit button.

1
2
modal.close('Accepted');
console.log(modal.returnValue); // "Accepted"

When Dialog.showModal() is called, a transparent overlay appears to prevent user interaction with content outside the dialog. CSS provides the ::backdrop pseudo-class to style this overlay, allowing you to make it visible.

1
2
3
4
5
6
7
8
9
10
11
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 code above styles the <dialog> element and changes the dialog’s overlay to a semi-transparent gray.

The <dialog> element also has a Dialog.show() method that opens the dialog without the overlay, allowing users to interact with the content outside the dialog.

Events

The <dialog> element has two events that can be listened to:

  • close: Triggered when the dialog is closed.
  • cancel: Triggered when the dialog is closed by pressing the Esc key.

To close the dialog when the user clicks the overlay, you can use the following code:

1
2
3
4
5
modal.addEventListener('click', (event) => {
  if (event.target === modal) {
    modal.close('cancelled');
  }
});

<details> and <summary>

Basic Usage

The <details> tag is used to create a collapsible section, which the browser will display in a collapsed state. By default, the content inside the <details> tag will be collapsed, showing only a summary with a triangle indicator.

1
2
3
<details>
  This is some explanatory text.
</details>

In the browser, the above code will show as:

1
▶ Details

Clicking on “Details” will expand the text to show:

1
2
▼ Details
This is some explanatory text.

Clicking again will collapse the text.

The open attribute on the <details> tag allows you to open it by default:

1
2
3
<details open>
  This is some explanatory text.
</details>

In this case, the section will be expanded when the page loads.

The <summary> tag is used to customize the title of the collapsible content:

1
2
3
4
<details>
  <summary>This is the title</summary>
  This is some explanatory text.
</details>

This will display as:

1
▶ This is the title

Clicking on the title will expand the section to show:

1
2
▼ This is the title
This is some explanatory text.

You can use CSS to change the default arrow using summary::-webkit-details-marker:

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

Alternatively, you can hide the default arrow and use a different indicator:

1
2
3
4
5
6
7
8
summary::-webkit-details-marker {
  display: none;
}
summary:before {
  content: "\2714";
  color: #696f7c;
  margin-right: 5px;
}

JavaScript API

You can check if a <details> element is open or closed using the open property:

1
2
3
4
5
6
7
const details = document.querySelector('details');

if (details.open) {
  // Expanded state
} else {
  // Collapsed state
}

The toggle event is fired whenever the <details> element is opened or closed:

1
2
3
4
5
6
7
details.addEventListener('toggle', event => {
  if (details.open) {
    // Expanded state
  } else {
    // Collapsed state
  }
});

Link to original article:

https://wangdoc.com/html/elements