Brijesh's Git Server — web-components-demo @ main

this is for demo, will be deleted soon

helper.js (view raw)

 1
 2
 3
 4
 5
 6
 7
 8
 9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 
function createWebComponent(tagName, template, props = []) {
  class CustomElement extends HTMLElement {
    constructor() {
      super();
      this.render();
    }

    static get observedAttributes() {
      return props;
    }

    attributeChangedCallback(name, oldValue, newValue) {
      this.render();
    }

    render() {
      const html = template.replace(/{{(\w+)}}/g, (match, prop) => {
        return this.getAttribute(prop) || "";
      });
      this.innerHTML = html;
    }
  }

  customElements.define(tagName, CustomElement);
}

window.createWebComponent = createWebComponent;