Polymer custom element tag appearing in the DOM

Question

I've just started learning about Polymer custom elements.

I've created a very simple custom element, the usage of which is as follows:

<my_custom_element></my_custom_element>

The template for the custom element is:

 <template>
   <span>Hello</span>
 </template>

If I inspect the DOM using Chrome Dev tools, I notice that my_custom_element tag appears in the DOM. I wasn't expecting this. I was expecting that this tag would be replaced by the template content. What does my_custom_element represent in its own right?

I also read that :host can be used to style a custom element internally from within its definition and it's used to style host element itself. But again I don't understand what it means to style the host element in its own right. Isn't the host element defined by its template content?

i don't know anything about polymer, but it's possible that it's creating a custom xmlns. — Woodrow Barlow

Zikes Zikes · Accepted Answer · 2015-07-01T18:30:50

The web components model does not use <my-custom-element> as a placeholder, but as an actual and real HTML element with complex behaviors and its own contents.

Polymer custom element tag appearing in the DOM

1 Answers