Search code examples
javascripttemplatesimportcustom-element

How to move all Custom Element related into separate file to be imported & reused

I am having hard time to move all things related to custom element into separate file to be imported and reused. Here is simple custom element pc-coverflow-swiper created:

<template id="TmplCoverflowSwiper">
  <h3>Hello From Template!</h3>
  <script>
    console.log("I am executed in template script");
  </script>
</template>

<script>
  class CoverflowSwiper extends HTMLElement {
    /** Custom Component Reactions **/
    connectedCallback() {
      //make deep copy of the template and import into the current document
      let tmpl = document.querySelector("#TmplCoverflowSwiper");
      let newNode = document.importNode(tmpl.content, true);
      this.appendChild(newNode);
    }
  }
  //link custom element w/ JS class
  customElements.define("pc-coverflow-swiper", CoverflowSwiper);
</script>

<h1>Making Web Component</h1>
<pc-coverflow-swiper>
</pc-coverflow-swiper>

Now, i like to move all the related things defining pc-coverflow-swiper custom element outside into separate file tmpl.html, so i can reused it in the future. How do you do it properly?

Here is the way i am trying to make it work, however. It breaks on import. Specifically, the 'script' content of the template tag isn't anymore executed on import (see missing text "I am executed in template script" logged in the console)

Main File:

<!-- include the polyfill for web components. This must precede imports -->
<script src="../polyfills/webcomponents-lite.js"></script>

<!-- import our template from an external file -->
<link rel="import" href="tmpl.html" id="tmplCoverflow">

<h1>Making Web Component</h1>
<pc-coverflow-swiper></pc-coverflow-swiper>

Extracted Custom Element related things to be imported & reused are in file tmpl.html as follows:

<template id="TmplCoverflowSwiper">
    <h3>Hello From Template!</h3>
    <script>
        console.log("I am executed in template script");
    </script>
</template>

<script>
  (function() {
    class CoverflowSwiper extends HTMLElement {
      /** Custom Component Reactions **/
      connectedCallback() {
        //make deep copy of the template and import into the current document
        let tmpl = document.querySelector("#TmplCoverflowSwiper");
        let newNode = document.importNode(tmpl.content, true);
        this.appendChild(newNode);
      }
    }
    //link custom element w/ JS class
    customElements.define("pc-coverflow-swiper", CoverflowSwiper);
    // ownerDocument references this component document being imported
    var thisImportDoc = document.currentScript.ownerDocument;
    // Get the template from this file, clone it,
    // and append it to the importing document.
    var tmplNode = thisImportDoc.querySelector('#TmplCoverflowSwiper');
    // the "document" keyword here references the "main" document
    // (the one that's importing this HTML file)
    document.body.appendChild(tmplNode.cloneNode(true));
  })();
</script>

Thanks for any help

Solution

  • All things considered, the solution i found involved ditching the whole Google invented html import() and use HTMX library to accomplish the same thing as follows:

    <!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <title>Swiper demo</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1" />
 <!-- include the polyfill for web components. This must precede imports -->
 <!-- <script src="../polyfills/webcomponents-lite.js"></script> -->

 <!-- import our template from an external file -->
 <!-- <link rel="import" href="tmpl.html" id="tmplCoverflow"> -->
 <script src="https://unpkg.com/[email protected]"></script>
</head>

<body>
  <h1>Making Web Component</h1>
  <pc-coverflow-swiper hx-get="./tmpl.html" hx-trigger="load" hx-target="head" hx-swap="beforeend">
  </pc-coverflow-swiper>
</body>
</html>

    As you can see, I did two things:

    1. Removed import to include HTMX libary in the Head, so i can use it's API in my custom element html tag
    2. I update my custom element html tag to trigger request to import the html file on "load" event and specified to insert that in the head of the document

    Now, i am able to keep all related matters of the custom element in separate file that is imported whenever my custom element is used in the page. And the most important, that the script section of the template is being executed like it should be on the append that wasn't working before with the Google's import feature

    I hope this useful...