behavior difference between <my-component/> and <my-component></my-component>

[ogodineau]

Hi,
i've tried some tutorials and i've found something weird i don't understand :
On my index.html i've declared into the body

 <my-component/><my-component/>

thus, i've hoped my component appears twice. In fact,it appears only once in chrome.

But If i had written into the body

<my-component></my-component><my-component></my-component>

my component would appear twice in chrome!

Here my polymer elements

 <link rel="import" href="../bower_components/polymer/polymer.html">
<polymer-element name="app-globals" >
  <script>
  (function() {
    var values = {};

    Polymer({
       ready: function() {
         this.values = values;
         for (var i = 0; i < this.attributes.length; ++i) {
           var attr = this.attributes[i];
           values[attr.nodeName] = attr.nodeValue;
             }
           }
        });
      })();
  </script>
</polymer-element>

<polymer-element name="my-component">
<template>
<app-globals id="globals"  firstname="Addy" lastname="Osmani"></app-globals>
<div id="firstname">{{$.globals.values.firstname}}</div>
<div id="lastname">{{$.globals.values.lastname}}</div>
 </template>
  <script>
      Polymer({
          ready: function() { 
            console.log('Last name: ' + this.$.globals.values.lastname); 
          }
      });
  </script>
</polymer-element>

[ogodineau]

I wish it was because it's html but not xhtml
However, If the use of empty element is incorrect why my component appears on the page?

[ebidel]

Only certain HTML Elements can be self-closing according to the HTML parser. Therefore, custom elements always need to be of the form:

<my-component></my-component>

<my-component/> will not work. More info: #628

[astericky]

Thanks Eric! I was wondering about this.