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 include
ed 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
orglobalThis
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 isincluded
. F.e. maybe an instance of a newIncludedHTML
class, or something, for the sake of representing it by having a backing class. - Or maybe
this
is aclass IncludeDocument extends Document
for the included file. Maybe it has some new property likethis.attributes
which represents the attributes that we passed in via the<include>
. Or something.
Let’s make HTML re-usable!