conditional XSLT position not preserved

[sashafirsov]

When on subsequent render the IF condition added the content, instead of inline, it is added to the end.

<custom-element>
            <template>
                <form slice="email-form" custom-validity=" string-length(//slice/username) > 3 ??
                        concat('should be more than 3 characters, now is ',string-length(//slice/username) ) ">
                    <label> Email
                        <input name="email" slice="username" slice-event="input" placeholder="non-empty" required="">
                    </label>
                    <if test="//username/@validation-message">
                        <var>{//username/@validation-message}</var>
                    </if>
                    <button>Next</button>
                    <p>//email-form/@validation-message: {//email-form/@validation-message} </p>
                    <p>//slice/username: {//slice/username} </p>
                </form>
            </template>
        </custom-element>