Using HTML5 Boolean Data Attributes in an XPage

Question

When trying to use Boolean Data Attributes (http://www.w3.org/html/wg/drafts/html/master/infrastructure.html#boolean-attribute) in my Xpage I get syntax errors.

The markup snippet:

<label>
    <span>Layout</span>
    <select class="layout-option m-wrap small">
        <option value="fluid" selected>Fluid</option>
        <option value="boxed">Boxed</option>
    </select>
</label>

Causes the following parse error:

Attribute name "selected" associated with an element type "option" must be followed by the ' = ' character.

I have set the doctype to HTML5. How can I fix this error?

Answer 1

A slight modification to Sven's answer did the trick:

<label>
    <span>Layout</span>
    <select class="layout-option m-wrap small">
        <xp:text escape="true" tagName="option" value="Fluid">
            <xp:this.attrs>
                <xp:attr name="value" value="fluid" />
                <xp:attr name="selected" minimized="true" value="" />
            </xp:this.attrs>
        </xp:text>
        <option value="boxed">Boxed</option>
    </select>
</label>

Generates the HTML:

<label>
    <span>Layout</span>
    <select class="layout-option m-wrap small">
        <option value="fluid" selected>Fluid</option>
        <option value="boxed">Boxed</option>
    </select>
</label>

Answer 2

You can do this when using a computed text and the minimized option in the attributes.

<label>
    <span>Layout</span>
       <select class="layout-option m-wrap small">
        <xp:text escape="true" tagName="option" styleClass="" value="Fluid">
            <xp:this.attrs>
                <xp:attr name="selected" minimized="true" value="" />
            </xp:this.attrs>
       </xp:text>

        <option value="boxed">Boxed</option>
    </select>
</label>

Answer 3

XPages source must be XML compliant, so HTML5 does not fit. You have few options.

1. Use any value in property, as suggested by Naveen.
2. Use custom rendered attribute as suggested by Sven.
3. Output HTML5 by computedText control.
4. Make your own component (OSGi, in database) that outputs SELECT tag to your liking.