Why can't I see HTML 5 <dialog>?

facelets, html, jsf

Solution

I have never used the `dialog` tab before, but after inspecting the DOM and styles built into Chrome, it seems as though by default the element is set to `display: none;`

dialog:not([open]){ display: none; }

So to display this on your page, you will need to set the style;

dialog{ display: block; }

Update

Also, you can use the `open` attribute on the `dialog` element

<dialog open>....</dialog>

Problem

Here is my Facelets file: ``` <!DOCTYPE html> <html lang="en" xmlns:f="http://java.sun.com/jsf/core" xmlns:h="http://java.sun.com/jsf/html"> <h:head> <title>Simple JSF Facelets page</title> </h:head> <h:body> Place your content here! <dialog> <dt>Sam</dt> <dd>Knock, Knock.</dd> <dt>Eric</dt> <dd>Who's there?</dd> <dt>Sam</dt> <dd>Justin.</dd> <dt>Eric</dt> <dd>Justin who?</dd> <dt>Sam</dt> <dd>Justin time for dinner!</dd> </dialog> </h:body> </html> ``` What I see in the browser is only Place your content here! When I check the source for this file, I see in chrome: ``` <!DOCTYPE html> <html lang="en"><head> <title>Simple JSF Facelets page</title></head><body> Place your content here! <dialog> <dt>Sam</dt> <dd>Knock, Knock.</dd> <dt>Eric</dt> <dd>Who's there?</dd> <dt>Sam</dt> <dd>Justin.</dd> <dt>Eric</dt> <dd>Justin who?</dd> <dt>Sam</dt> <dd>Justin time for dinner!</dd> </dialog> <ul id="javax_faces_developmentstage_messages" title="Project Stage[Development]: Unhandled Messages"></ul></body> </html> ``` So, from the source code, it looks like it should be a valid html5 file? But currently, I can't see the content that should be in the dialog tag?

Original source