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

Answer 1

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)