Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Which elements can be nested inside the <dialog> element?

TL;DR

Which elements can be nested inside the <dialog> element?


When I look at examples like this, this and this they all place elements like <h3>, <p> and <button> as child nodes to the <dialog> element.

However, the Visual Studio (2013) intellisense list only the following elements:

  • content
  • dd
  • dt
  • shadow
  • template

<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
    <body>
        <dialog role="dialog">
            <content></content>
            <dd></dd>
            <dt></dt>
            <shadow></shadow>
            <template></template>
        </dialog>
    </body>
</html>

Now, if I add a <div> element to the <dialog> element

<dialog role="dialog">
    <div></div>
</dialog>

Visual Studio will complaint that:

Element 'div' cannot be nested inside element 'dialog'.

The div element has no special meaning at all. It represents its children. It can be used with the class, lang, and title attributes to mark up semantics common to a group of consecutive elements.

I also looked at the W3 docs but to no avail.

So I ask again: Which elements can be nested inside the <dialog> element?

like image 929
Bjørn-Roger Kringsjå Avatar asked Sep 04 '25 01:09

Bjørn-Roger Kringsjå


1 Answers

Update for 2022+: <dialog> indeed made it in our browsers with production-ready support: https://caniuse.com/dialog and as per the specification, any flow content can be used.

like image 117
Jan Klan Avatar answered Sep 07 '25 16:09

Jan Klan