Why can't I see HTML 5 ?

问题

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?

回答1:

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>

回答2:

Use the open attribute on the dialog element

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

By default the element is set to display: none;

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

Also note, this feature is not available in all browsers at this time. E.g. in Chrome it requires chrome://flags/#enable-experimental-web-platform-features to be enabled.

(This is a heavily edited version of Tim B James answer).

来源：https://stackoverflow.com/questions/15487785/why-cant-i-see-html-5-dialog

标签

html

jsf

facelets

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

问题

回答1:

回答2: