Polymer: Closing tags with /> leads to ignored shadow DOM content

[beders]

See:
http://jsbin.com/cidozeda/1/

Note the unfortunate element.

Parses just fine, but leads to anything following that element be silently ignored!

if using the /> short-hand is not allowed, a warning in the console would be magnificent.
I spent hours chasing down this problem :)

[sjmiles]

/> is an xhtml construction and isn't supported in regular html.

This is true before Polymer or ShadowDOM or any of these things come into being.

[Jeff17Robbins]

According to this document,
http://dev.w3.org/html5/html-author/#void-elements-0, the "self-closing tag
syntax may be used" for void elements and foreign elements. An example
void element is "
" which can (apparently) be written "
". I don't
know what previous html documents had to say about this, but it looks like
xhtml has made some incursions?

On Fri, Jul 11, 2014 at 4:23 PM, Scott J. Miles [email protected]
wrote:

/> is an xhtml construction and isn't supported in regular html.

This is true before Polymer or ShadowDOM or any of these things come into
being.

—
Reply to this email directly or view it on GitHub
https://github.com/Polymer/polymer/issues/628#issuecomment-48778535.

[sjmiles]

If you put some character to the left of '>' it's simply ignored by the HTML parser. E.g., '/>', '?>', '!>', are all the same.

There are only a tiny handful of void elements (link, br, img for example).

All the rest including 100% of custom-elements must be closed with a proper end-tag.

[beders]

I'm aware of /> being an XHTML construct, yet the HTML5 parser supports it.
The browser also won't simply swallow the rest of the content if a non-Void tag happens to use />

<div>
  <div/>
  <span>Test me</span>
  </div>

Will show 'Test me' just fine.

What is the difference here?

[sjmiles]

As I've said the HTML parser does not support />, it simply ignores the slash.

Your example is bogus HTML, the only reason anything is displayed is because the parser has managed to soldier on anyway.

What you have written is seen as:

<div>
<div>
  <span>Test me</span>
</div>

which is ambiguous.

[beders]

Chrome does a great job to STILL parse it (you can see the content in the Debugger) and yet doesn't show it on the page. Very confusing.
Since it is indeed not polymer related and has to do with it being a custom html tag, I'm closing it.
Thanks for the explanation!

[sjmiles]

Sorry if I'm being pedantic, but for posterity, this has nothing to do with custom tags.

You simply cannot use /> in HTML to make a non-void tag into a void tag.

Many try to do this and to the degree it ever works, it's just luck that the parser was able to recover from the error.

[Jeff17Robbins]

Agreed. The html5 spec is explicit about this:

" If it is used for other elements, it is treated as a start tag
http://dev.w3.org/html5/html-author/#start-tag."
http://dev.w3.org/html5/html-author/#self-closing-tag

Except for void tags (and foreign elements like svg), as Scott says, you
can't use a self-closing tag to save typing the end tag.

On Fri, Jul 11, 2014 at 4:47 PM, Scott J. Miles [email protected]
wrote:

Sorry if I'm being pedantic, but for posterity, this has nothing to do
with custom tags.

You simply cannot use /> in HTML to make a non-void tag into a void tag.

Many try to do this and to the degree it ever works, it's just luck that
the parser was able to recover from the error.

—
Reply to this email directly or view it on GitHub
https://github.com/Polymer/polymer/issues/628#issuecomment-48781086.

[beders]

Sjmiles, it had everything to do with me using a custom tag in the sample code. That's what I meant.
I wouldn't have stumbled over it otherwise.
It has nothing to do with custom tags in general.
Sorry for wasting your time guys. I should have read the HTML5 spec.