Use of HTML native <dialog> element for modals, offcanvas, popovers, & tooltips

[JSystemsTech]

I've been reading recently that most (if not all) commonly used browsers now support use of the native html dialog element, which is used for custom modal and popover like creation without bootstrap.

My question is are there any plans for bootstrap to use this element at some point to create any of the following components: modals, offcanvases, popovers, & tooltips?

some benefits to using this are that accessibility is mostly built in and interpreted by the browser, backdrop is included natively (can be styled with CSS), and escape keys automatically close a modal instances just to name a few.

I've been reading over this dev's blog and he seems to have a solid understanding of the element works and goes into more detail.

Modals Will Never Be The Same - HTML dialog Element

below is a basic snippet

HTML

<dialog open>
  <span>You can see me</span>
</dialog>

JS

const dialog = document.querySelector("dialog");
dialog.show(); // Opens a non-modal dialog
dialog.showModal(); // Opens a modal

[julien-deramond]

My question is are there any plans for bootstrap to use this element at some point to create any of the following components: modals, offcanvases, popovers, & tooltips?

Yep, it's tracked in #33804 for modals first. Hopefully in v6 depending on other prioritized features and the upgrade of our .browserslistrc (and so the browsers' support).

[JSystemsTech]

Awesome! Looking forward to seeing how that ends up getting integrated! The project I work with has had to implement a custom modal component using dialog to fulfill accessibility requirements so this is great news to know that it is an upcoming feature.