[HTML5/JS] Define a custom self closing (void) HTML element like BR and IMG

Jochem Stoel - Apr 3 '18 - - Dev Community

I am unable to (re)produce a self closing element. Is it impossible?

<img />
<br />
<link />
<meta />
Enter fullscreen mode Exit fullscreen mode

Self closing HTML elements do not require or support a closing tag.

Modern browsers support custom element tags and behavior using document.registerElement.

Try to extend already void HTML element fails.

class HTMLVoidElement extends HTMLBRElement {
}

document.registerElement('x-void', HTMLVoidElement)
document.createElement('x-void') // returns <x-void></x-void>
Enter fullscreen mode Exit fullscreen mode

It makes no difference if the element is in the document HTML and not created programmatically.

<x-void />
<br />
Enter fullscreen mode Exit fullscreen mode

Failed

Thoughts?

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Terabox Video Player