A Prototype For An Html Partial

Get the Code Here

I like the idea of an HTML partial. Ideally, servers would have the ability to construct an HTML page from a simple HTML input. This would be wildly useful and would replace quite a bit of the technical complexity that goes into things like WordPress and Next.js and other frameworks. It would let us serve plain html with very little css and javascript. It would let us break up our web pages into semantic blocks so we can focus deeply on generating well structure XML for both human and robot consumption.

It would look something like this when implemented:

<html>
<head>
	<html-partial src="metadata.html"></html-partial>
</head>
<body>
	<html-partial src="content-05-09-2025.html"></html-partial>
</body>
</html>

This theoretical html partial lets us re-use metadata.html and content-05-09-2025.html to construct a single html file.

I wrote a prototype of what this could look like utilizing Custom HTML elements. It looks like this:

class HTMLPartial extends HTMLElement {

 connectedCallback(){
   this.shadowdom = this.getAttribute('shadowdom')
   this.src = this.getAttribute('src')
   if(this.src === null){
      this.innerHTML = '<error>HTML PARTIAL REQUIRES SOURCE</error>'
   }
   fetch(this.src)
    .then(res => res.text())
    .then(res => {
      if(this.shadowdom){
        this.shadow = this.attachShadow({mode: 'open'})
        this.shadow.innerHTML = res
      } else {
        this.innerHTML = res
      }
    })
  }
}

customElements.define('html-partial', HTMLPartial)

Using this code – though I strongly advise against using it in production – would look something like:

<html>
<head>
<script>
class HTMLPartial extends HTMLElement {

 connectedCallback(){
   this.shadowdom = this.getAttribute('shadowdom')
   this.src = this.getAttribute('src')
   if(this.src === null){
      this.innerHTML = '<error>HTML PARTIAL REQUIRES SOURCE</error>'
   }
   fetch(this.src)
    .then(res => res.text())
    .then(res => {
      if(this.shadowdom){
        this.shadow = this.attachShadow({mode: 'open'})
        this.shadow.innerHTML = res
      } else {
        this.innerHTML = res
      }
    })
  }
}

customElements.define('html-partial', HTMLPartial)
</script>
</head>
<body>
	<html-partial src="test-src.html" shadodom></html-partial>

</body>
</html>

Tags