Think about how you load different types of resources on the web. For JS, we have <script src>. For CSS, your go-to is probably <link rel="stylesheet">. For images it’s <img>. Video has <video>. Audio, <audio>…. Get to the point! The majority of the web’s content has a simple and declarative way to load itself. Not so for HTML. Here’s your options:
<iframe>– tried and true but heavy weight. An iframe’s content lives entirely in a separate context than your page. While that’s mostly a great feature, it creates additional challenges (shrink wrapping the size of the frame to its content is tough, insanely frustrating to script into/out of, nearly impossible to style).- AJAX – I love
xhr.responseType="document", but you’re saying I need JS to load HTML? That doesn’t seem right. - CrazyHacks™ – embedded in strings, hidden as comments (e.g.
<script type="text/html">). Yuck!
See the irony? The web’s most basic content, HTML, requires the greatest amount of effort to work with. Fortunately, Web Components are here to get us back on track.
Getting started
