使用 customElements 在 javascript 中创建页面构建框架

Question

我和我的朋友正在尝试制作一个 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

我们将如何着手做这样的事情，我们是否在正确的轨道上

Answer 1

你想做这样的事情吗？

我已将选项 title 传递给 class 并在 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)

使用 customElements 在 javascript 中创建页面构建框架

Creating a page building framework in javascript utilizing customElements

javascript

custom-element

html-templates