Non-JavaScript HTML authors suffer from code duplication

#1

The number one most common pitfall I see with anyone learning HTML is duplication of HTML everywhere. The moment you want to have multiple “pages”, without writing JavaScript, you start copy/pasta.

The learning curve for re-usability of HTML is much to high, and requires learning JavaScript. Even CSS has re-usability (although that has some serious issues that should be addressed too).

HTML Imports may not have been the right solution, but I still think we need first-class HTML re-usability without being required to touch JavaScript. As a bonus requirement, a JavaScript developer should also be able to re-use HTML written by a non-JavaScript author (f.e. with or without Custom Elements).

To start the discussion, at high level it could look something like follows:

<!-- namecard.html -->
<div namespace>
  <span>My name is <b>Wolverine</b>.</span>
</div>
<style>...scoped css perhaps...</style>

<!-- app.html -->
<h1>Awesome site!</h1>
<include src="./namecard.html" />

But it would go a long way with a simple templating system (simple from the perspective of the person using the templating system):

<!-- namecard.html -->
<div namespace>
  <span>My name is <b>{name || "Wolverine"}</b>.</span>
</div>
<style>...scoped css perhaps...</style>

<!-- app.html -->
<h1>Awesome site!</h1>
<include src="./namecard.html" name="Grogu" />

Or something, nothing more, at least not for the MVP. No JavaScript. Just literally HTML, and ability to re-use HTML, with basic templating.

Maybe even the name || "Wolverine" bit in the example is too complicated. Is it JavaScript?

So maybe, the simple MVP needs to be only pure HTML (the following is inspired from Angular and Vue):

<!-- namecard.html -->
<div namespace>
  <span>My name is <b bind-if="name"></b>Wolverine<b></b>.</span>
</div>
<style>...scoped css perhaps...</style>

<!-- app.html -->
<h1>Awesome site!</h1>
<include src="./namecard.html" name="Grogu" />

For the MVP, we can perhaps force <script> tags within files that are <include>ed to be ignored, and add that later. Just straight HTML and CSS, nothing more.

Once an MVP is established that makes HTML and CSS re-usable, a follow on proposal could define what <script> tags do in an includeed file. For example:

<!-- namecard.html -->
<div namespace>
  <span>My name is <b bind="calculatedName"></b>.</span>
</div>
<style>...scoped css perhaps...</style>
<script>
  // this is an object that is instantiated by the `<include>` process, one `this` for each instance.
  this.calculatedName = name || "Wolverine"
</script>

<!-- app.html -->
<h1>Awesome site!</h1>
<include src="./namecard.html" name="Grogu" />

In that last example,

  • we have plain HTML, and vanilla JS.
  • this is not the global object. window or globalThis can still be used to access the global object.
  • this is not an Element. It’s a unique object that represents the scope of a file that is included. F.e. maybe an instance of a new IncludedHTML class, or something, for the sake of representing it by having a backing class.
  • Or maybe this is a class IncludeDocument extends Document for the included file. Maybe it has some new property like this.attributes which represents the attributes that we passed in via the <include>. Or something.

Let’s make HTML re-usable!

[Proposal] CHTML
#2

Discussion for client-side include feature in HTML:

(related topic: Add src attribute to template)

Discussion for template instantiation:

(related topic: Extension of <template>)

#3

In my opinion this feature would be useful if we have scoped CSS and Script.

This would be a much simpler alternative to Web Components (which could get a wider adoption).