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:
<!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?
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With