Создание каркаса построения страницы в javascript с использованием customElements - PullRequest
Новая
       63

Создание каркаса построения страницы в javascript с использованием customElements

0 голосов
/ 01 мая 2020

Я и мой друг пытаемся создать фреймворк javascript, который позволяет пользователям создавать элементы и настраивать их. Как и управлять ими как-нибудь.

Мы надеялись, что сможем каким-то образом создать собственный элемент, подобный этому 

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);

, круто, что вы можете использовать его в HTML, как это <e-header></e-header>, но мы надеялись, что мы могли бы сделать что-то вроде этого 


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

мы продолжаем получать эту ошибку Uncaught TypeError: Illegal constructor

как бы мы go сделали что-то подобное, и мы на правильном пути

1 Ответ

1 голос
/ 01 мая 2020

Вы хотите сделать что-то подобное?

Я передал классу title и установил его в классе. 

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)
...