Polymer should respect XHTML syntax

[tigerhawkvok]

Right now, Polymer fails with self-closing tags, eg

<polymer-tag></polymer-tag>

must be used, as

<polymer-tag/>

fails to render correctly, despite being valid XHTML.

[ebidel]

Unfortunately, the HTML spec/parser only allows a certain few tags to be self-closing, so can't create new ones using custom elements. You can however piggyback of a self closing tag by creating a type extension custom element. See http://echelog.com/logs/browse/polymer/1379282400.

Closing this as Polymer can't do much about it.

[tigerhawkvok]

Interesting. So you can't register a void element, but it needs to be void for the HTML parser to accept a self-close.

I'll test it with the XML parser and see how it behaves there, and update this thread for information's sake, even though you've closed it.

[tigerhawkvok]

So, serving the page as XHTML will permit self-closing tags, BUT breaks some scripts.

For example, I created this element:

<link rel="import" href="../bower_components/polymer/polymer.html"/>
<polymer-element name="copyright-statement" attributes="copyrightStart">
  <template>
    <span>
      &#169; {{copyrightStart}}{{thisYear}}
    </span>
  </template>
  <script>
    Polymer('copyright-statement',{
        copyrightStart:2014,
        created: function() {
            console.log("The copyright-statement has been registered.");
        },
        ready: function() {
            this.thisYear = new Date().getFullYear();
            if(this.copyrightStart != null) {
                if(parseInt(this.copyrightStart) < this.thisYear) {
                    this.copyrightStart = this.copyrightStart + " \u2014 ";
                } else {
                    this.copyrightStart = "";
                }
            }
        }
    });
  </script>
</polymer-element>

In HTML mode, this:

<copyright-statement copyrightStart="2013"></copyright-statement>

outputs

© 2013 — 2014

But in XHTML mode, this:

<copyright-statement copyrightStart="2013"/>

only outputs

© 2014