HTML Modules #169

MzHub · 2023-07-30T15:29:18Z

MzHub
Jul 30, 2023

Import HTML files via JS imports and access their elements and JS exports.

Code sample

<script type="module">
	import { TabList } from "./tablist.html";
	customElements.define("tab-list", TabList);
</script>

Main.html

<!doctype html>
<html>
    <head>
        <title>HTML Modules Demo</title>
        <script type="module">
            import { HTML5Element } from "./html5Element.html";
            window.customElements.define("my-html5-element", HTML5Element);
        </script>
    </head>
    <body>
        <my-html5-element></my-html5-element>
    </body>
</html>

HTML5-Element.html

Click to show

<template id="html5ElementTemplate">
  <style>
      .outerDiv {
          border:0.1em solid blue;
          display:inline-block;
          padding: 0.4em;
      }

      .devText {
          font-weight: bold;
          font-size: 1.4em;
          text-align: center;
          margin-top: 0.3em;
      }

      .mainImage {
          height:254px;
      }
  </style>
  <div class="outerDiv">
      <img class="mainImage" src="https://www.w3.org/html/logo/downloads/HTML5_Logo_512.png" />
      <div class="devText">HTML Modules Are Great!</div>
  </div>
</template>
<script type="module">
  let moduleDocument = import.meta.document;

  class HTML5Element extends HTMLElement {
      constructor() {
          super();
          console.log("HTML5Element constructor");
          let shadowRoot = this.attachShadow({ mode: "closed" });
          let template = moduleDocument.getElementById("html5ElementTemplate");
          shadowRoot.appendChild(document.importNode(template.content, true));
      }

      connectedCallback() {
          console.log("HTML5Element connectedCallback");
      }
  }

  export { HTML5Element };
</script>

MDN URL:

No response

Specification URL:

https://github.com/WICG/webcomponents/blob/gh-pages/proposals/html-modules-explainer.md

Any other links?

https://chromestatus.com/feature/4854408103854080
https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/HTMLModules/designDoc.md

How stable is this feature?

Future (No implementations yet)

Type of feature

JS API

What focus area does this feature fall under?

Consuming Web Components, Making Web Components, Templating

Details

HTML Modules is a big deal for me personally.

I would love to use the native <template> element for my Web Components/Custom Elements, without placing all the <template> tags for different components in the website's main document itself. HTML Modules is the only native way I've found to do this.

If I understand it correctly, it would allow components to be .html files with a <template>, <script> and maybe <style> as well, and you could then easily import the whole component.

MzHub · 2023-07-30T15:41:40Z

MzHub
Jul 30, 2023
Author

HTML Modules is a big deal for me personally.

I would love to use the native <template> element for my Web Components/Custom Elements, without placing all the <template> tags for different components in the website's main document itself. HTML Modules is the only native way I've found to do this.

If I understand it correctly, it would allow components to be .html files with a <template>, <script> and maybe <style> as well, and you could then easily import the whole component.

1 reply

MzHub Jul 30, 2023
Author

Here's a code example from a project with a partial polyfill for HTML Modules:

LeaVerou · 2023-08-01T11:27:03Z

LeaVerou
Aug 1, 2023
Maintainer

Yeah, I was wondering about this. There was a lot of buzz around it, but then Safari (IIRC) vetoed it and it was eventually removed even by browsers that supported it.

3 replies

MzHub Aug 2, 2023
Author

I believe that was HTML Imports. This is similar, but slightly different, the explainer goes into more detail on how they differ: https://github.com/WICG/webcomponents/blob/c351fc9/proposals/html-modules-explainer.md#why-are-html-modules-needed

LeaVerou Aug 3, 2023
Maintainer

You are absolutely correct, I was talking about HTML Imports! I've updated your first post with a code sample (to ensure others don't also get confused) and entered your description in "more details", since it was empty.

MzHub Aug 4, 2023
Author

Thanks!

If you don't mind, I'll change the code sample to this HTML Modules Demo from the proposal, which I think is a bit clearer on how it would work.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

HTML Modules #169

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 2 comments 4 replies

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{title}}

{{title}}

Select a reply

HTML Modules #169

MzHub Jul 30, 2023

Code sample

MDN URL:

Specification URL:

Any other links?

How stable is this feature?

Type of feature

What focus area does this feature fall under?

Details

Replies: 2 comments · 4 replies

MzHub Jul 30, 2023 Author

MzHub Jul 30, 2023 Author

LeaVerou Aug 1, 2023 Maintainer

MzHub Aug 2, 2023 Author

LeaVerou Aug 3, 2023 Maintainer

MzHub Aug 4, 2023 Author

MzHub
Jul 30, 2023

Replies: 2 comments 4 replies

MzHub
Jul 30, 2023
Author

MzHub Jul 30, 2023
Author

LeaVerou
Aug 1, 2023
Maintainer

MzHub Aug 2, 2023
Author

LeaVerou Aug 3, 2023
Maintainer

MzHub Aug 4, 2023
Author