Creating a page building framework in javascript utilizing customElements

Question

Me and my friend are trying to make a javascript framework that allows users to make elements and customize them. As well as manage them somehow.

We were hoping that we could somehow make a custom element like this

class Header extends HTMLElement {

  constructor() {
    super();

  }

  connectedCallback(){

    this.title = this.getAttribute("title")
    console.log(this.getAttribute("title"))

    if(this.hasAttribute("drawer-button")){

    }

    this.innerHTML = 
      `
      <div class="--e-header-1">
        <e-button></e-button>
        <div class="header-title">
          <h1>${this.title}</h1>
        </div>
      </div>
      `
  }

}

customElements.define('e-header', Header);

its cool that you can use it in HTML like this <e-header></e-header> but we were hoping that we could do something like this


var el = new Header(//put in options maybe);
document.append(el)

we keep getting this error Uncaught TypeError: Illegal constructor

how would we go about doing something like this and are we on the right track

The error comes from `document.append(el)` which should be `document.body.append(el)` — Emiel Zuurbier, May 01 '20 at 09:43

score 1 · Accepted Answer · answered May 01 '20 at 09:40

Do you want to do something like this?

I have passed option title to the class and set that in the class.

class Header extends HTMLElement {

  constructor(options) {
    super();
    this.title = options.title;
  }

  connectedCallback() {
    this.title = this.getAttribute("title")
    console.log(this.getAttribute("title"))

    if (this.hasAttribute("drawer-button")) {

    }

    this.innerHTML =
      `
      <div class="--e-header-1">
        <e-button></e-button>
        <div class="header-title">
          <h1>${this.title}</h1>
        </div>
      </div>
      `
  }

}

customElements.define('e-header', Header);

var el = new Header({
  'title': 'headerTitle'
});
document.body.append(el)

This is exactly what we were looking for thank you very much. — Nik Hendricks, May 01 '20 at 09:47
More generic, do ``Object.assign(this,options)`` instead of hard coding ``this.title=options.title`` And you can set default values: ``constructor({title='No Title'})`` — Danny '365CSI' Engelman, May 01 '20 at 11:14

Creating a page building framework in javascript utilizing customElements

1 Answers1