Search code examples
htmlpolymerweb-component

Why the <content> tag must be defined with a starting and ending tag?

I used these two syntaxes in Firefox/Chrome to define a WebComponent.

Open tag

<content></content>

Closed tag

<content/>

and both work as expected.

What are the (technical) reasons for defining <content> in the first way?

MDN Content element indicates that a starting and ending tag is mandatory, but doesn't specify why.

Solution

  • You actually must use the <content></content> form. In a normal HTML (non-XML) document (which is what you want to be making here), with the standard way that HTML parsing works in all browser engines, the <content/> tag is not a content end tag—instead it’s just a content start tag with an extra / inside it that just gets ignored by HTML parsers.

    In your case, that means when an HTML parser doesn’t see any </content> end tag for that content-start-tag-with-extra-/-at-the end, the parser never actually closes that content element, so that *all nodes that follow that content element become child content of it.

    To see what I mean, look at the DOM view of what the <content/> looks like to an HTML parser.

    enter image description here

    MDN Content element indicates that the empty tag form is mandatory, but doesn't specify why.

    I'm not sure what you mean by “empty tag form”. That MDN page says:

    Tag omission: None, both the starting and ending tag are mandatory.

    That means the content element must have an end tag.