Custom Components Loader in Vanilla JS

Introduce

ES6 명세에 보면 Web Components라는 것이 정의되어 있다.

얘는 일종의 분리된 DOM 을 만들 수 있도록 하는데, 다음과 같이 사용이 가능하다.


<!DOCTYPE html>

<html>
  <head>
    <meta charset="utf-8">
  </head>

  <body>
    <my-element>Hello</my-element> <!-- === <h1>Hello</h1> -->

    <script>
      class MyElement extends HTMLElement {
        constructor() {
          super();

          const template = document.createElement('template');
          template.innerHTML = '<h1><slot></slot></h1>';
      
          this.attachShadow({ mode: 'closed' })
            .append(template.content.cloneNode(true));
        }
      }

      window.customElements.define(
        'my-element',
        MyElement,
      );
    </script>
  </body>
</html>

그런데 보면 알겠지만, 위 코드는 innerHTML 을 이용해 HTML 코드를 인라인으로 넣어줘야 한다는 불편함이 있기 때문에...

다음과 같이 xhr 을 이용해 분리해줄 수도 있다.


class MyElement extends HTMLElement {
  constructor() {
    super();
    _connect();
  }
  
  async _connect() {
    const rawHtml = await (await fetch(/* html src */)).text();
    
    const template = document.createElement('template');
    template.innerHTML = rawHtml;
    
    this.attachShadow({ mode: 'closed' })
      .append(template.content.cloneNode(true));
  }
}

window.customElements.define(
  'my-element',
  MyElement,
);

다만 ES6의 Class Constructor는 async 할 수 없기 때문에

어쩔 수 없이 메서드를 하나 생성해줘야 한다.

물론 다음과 같이 then 을 이용해서도 가능은 한데


class MyElement extends HTMLElement {
  constructor() {
    super();
    
    fetch(/* html src */)
      .then(async (resp) => await resp.text())
      .then((rawHtml) => {
        const template = document.createElement('template');
        template.innerHTML = rawHtml;
      
        this.attachShadow({ mode: 'closed' })
          .append(template.content.cloneNode(true));
      });
  }
}

window.customElements.define(
  'my-element',
  MyElement,
);

이건 그냥 개인적으로 맘에 들지 않았다. 그래서 다른 방법이 없나 생각해 보았고...

ES6의 import 구문이 떠올랐다.


import rawHtml from './my-element.html'; // ERROR

class MyElement extends HTMLElement {
  constructor() {
    super();
    
    const template = document.createElement('template');
    template.innerHTML = rawHtml;
    
    this.attachShadow({ mode: 'closed' })
      .append(template.content.cloneNode(true));
  }
}

나는 솔직히 될 줄 알았다. 그런데 적어도 현재로서는 오로지 js 파일만을 import 할 수 있다고 한다.

그래서 내가 생각한 방법은?

어차피 ES6의 class 도 실제로는 ES5의 function Class Declaration을 축약한 것일 뿐이니까...


class Foo { }

console.log(typeof Foo); // "function"

그래서 다음과 같은 모듈을 하나 구현했다.


/**
 * raw html data loader
 * 
 * @param {String} src source link
 */
const rawHtmlLoader = async (src) => await (await fetch(src)).text();

export default async (src) => {
  // create a template lement
  const template = document.createElement('template');

  // set contents
  template.innerHTML = await rawHtmlLoader(src);

  // define custom element class (es5 version for async extends)
  function CustomComponent() {
    const customComponent = Reflect.construct(HTMLElement, [], CustomComponent);

    // attach shadow
    customComponent.attachShadow({ mode: 'closed' })
      .append(template.content.cloneNode(true));

    // return reflected constructor
    return customComponent;
  }

  // set prototype
  CustomComponent.prototype = Object.create(HTMLElement.prototype);

  // return custom component element
  return CustomComponent;
};

위 코드는 그냥 ES5 문법으로 Class를 구현한 것이고,

여기에 Reflection을 이용해 HTMLElement 를 extends 한 코드이다.

왜 이렇게 했냐? 바로 async 를 이용한 extends 를 구현하기 위해서 이런 짓을 한 것이다.

아무튼, 이 모듈을 통해 다음과 같이 html 확장자를 가진 template 을 바로 Load할 수 있다.

물론 웹팩이나 뭐 그런거 없이 Vanilla JS에서 말이다.


import loader from './loader.js';

window.addEventListener('load', async () => {
  window.customElements.define(
    'my-element',
    await loader('/components/my-element.html');
  );
});


<!-- /components/my-element.html -->

<h1>
  <slot></slot>
</h1>

<!-- 뭐 이런 것도 당연히 사용 가능 -->
<style scoped>
  h1 {
    font-weight: 100;
  }
</style>

개인적으로 이러한 방식이 마음에 들었다. 조금 더 깔끔하다고 생각한다.

근데 또 보면 멀리 돌아온 것 같기도 하고... 아무튼 뭐 욕심이 생겨 구현해 본 모듈.

GitHub에 코드도 올려두었다.

참고로 다음과 같이도 사용이 가능하다.


import componentLoader from 'https://raw.githack.com/Gumball12/vanilla-component-loader/main/index.js';

window.addEventListener('load', async () => {
  customElements.define(
    'my-element',
    await componentLoader('/components/my-element.html'),
  );
});

+

당연히 좀 더 나은 방법이 존재했다..

Vanilla JS로 MVVM 프레임워크를 구현해보며 알게 되었는데,

그냥 새로이 class를 구현하면 되었던 것...