self-closing-custom-html-elements.js

// We can create a new empty HTML document
const htmlDocument = document.implementation.createHTMLDocument()

// And we can find the XML namespace of HTML (http://www.w3.org/1999/xhtml) in the browser too
const xmlns = new DOMParser().parseFromString(
  new XMLSerializer().serializeToString(htmlDocument),
  'text/html'
).documentElement.getAttribute('xmlns')

// Using the namespace for HTML we can create a new XML document in the HTML namespace like this
const xmlDocument = document.implementation.createDocument(xmlns, '')

// Within the context of our empty HTML document, this function will parse HTML syntax and return a document fragment containing all parsed nodes of HTML DOM
function parseAsHTML(string = '') {
  return htmlDocument.createRange().createContextualFragment(string)
}

// Within the context of our empty XML document, this function will parse XML syntax and return a document fragment containing all parsed nodes of HTML DOM
function parseAsXML(string = '') {
  return xmlDocument.createRange().createContextualFragment(string)
}

// In HTML syntax, 'self-closing' tags are parsed as open tags like <div><div><div>
console.log(
  parseAsHTML(`<div /><div /><div />`)
)

/*

<div>
  <div>
    <div></div>
  </div>
</div>

*/

// In XML syntax, self-closing tags truly are self closing like <div></div><div></div><div></div>
console.log(
  parseAsXML(`<div /><div /><div />`)
)

/*

<div></div>
<div></div>
<div></div>

*/

// In this way, custom elements in HTML can be written as self-closing if in XML syntax, like any tag
console.log(
  parseAsXML(`<custom-element /><p /><custom-element /><p />`)
)

/*

<custom-element></custom-element>
<p></p>
<custom-element></custom-element>
<p></p>

*/

// Even though this cannot be expressed in HTML syntax, since these are all parsed as open tags
console.log(
  parseAsHTML(`<custom-element /><p /><custom-element /><p />`)
)

/*

<custom-element>
  <p>
    <custom-element></custom-element>
  </p>
  <p></p>
</custom-element>

*/