Understanding Kristofer Joseph's Single File Web Component

Via Brian LeRoux I found single-file-web-component.html by Kristofer Joseph. It's really clever! It demonstrates how to build a <hello-world></hello-world> custom Web Component in a single HTML file, using some neat tricks.

For my own education I spent some time picking it apart and built my own annotated version of the code showing what I learned.

Justin Fagnani provided useful feedback on this on Twitter.

<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8" />
    <title>Single File Web Component</title>
      body {
        background-color: #eee;
        font-family: Helvetica, sans-serif;
      h1 {
        color: blue;
        background-color: pink;
    <template id="single-file">
          These styles affect only content inside the shadow DOM.

          Styles in the outside document mostly do not affect stuff
          here, but there are some exceptions: font-family affects
          this <h1> for example. I don't understand the rules here.
        h1 {
          color: red;

      <h1>Hello world (web component)</h1>
      This code still works if you remove the type="module" parameter.

      Using that parameter enables features such as 'import ... from'

      More importantly it stops variables inside the script tag from
      leaking out to the global scope - if you remove type="module"
      from here then the HelloWorld class becomes visible.
      <script type="module">
        class HelloWorld extends HTMLElement {
          constructor() {
              If you remove the call to super() here Firefox shows an error:
              "Uncaught ReferenceError: must call super constructor before
              using 'this' in derived class constructor'"
            const template = document.getElementById("single-file");
              mode: 'open' means you are allowed to access
              document.querySelector('hello-world').shadowRoot to get
              at the DOM inside. Set to 'closed' and the .shadowRoot
              property will return null.
            this.attachShadow({ mode: "open" }).appendChild(
              template.content is a 'DocumentFragment' array.

              template.content.cloneNode() without the true performs
              a shallow clone, which provides a empty DocumentFragment

              template.content.cloneNode(true) provides one with 6 items
          connectedCallback() {
            // https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements#using_the_lifecycle_callbacks
            console.log("Why hello there 👋");
        customElements.define("hello-world", HelloWorld);

    <h1>This is not a web component</h1>


      const sf = document.getElementById("single-file");
        Before executing this line, sf.content.lastElementChild
        is the <script type="module"> element hidden away inside
        the <template> - we remove it from the template here and
        append it to the document.body, causing it to execute in
        the main document and activate the <hello-world> tag.

Created 2021-10-27T17:33:08-07:00, updated 2021-10-27T19:48:23-07:00 · History · Edit