如何使用 JS 类创建自定义元素来创建元素的属性答案

【问题标题】：How do I create a custom element using a JS class to create the properties for the element如何使用 JS 类创建自定义元素来创建元素的属性
【发布时间】：2020-02-04 02:18:09
【问题描述】：

所以我知道如何创建自定义元素并且已经制作了 2 个我很满意的元素。我的两个元素看起来像这样：

let menuPicker = Object.create(HTMLElement.prototype);

menuPicker.initialized = false;
menuPicker._init = function(){
...
}
...
menuPicker.attachedCallback = menuPicker._init;
menuPicker.createdCallback = menuPicker._init;
...
document.registerElement('menu-picker', {
    prototype: menuPicker
});

这很有效，但这次我想要一个 JS 类。特别是这个功能：

class test {
    get item(){...}
    set item(){...}
}

所以我想我可以执行以下操作来轻松实现这一点。

class listBox extends HTMLElement.prototype {
    initialized = false;
    constructor(props){
        super(props);
        this.attachedCallback = this._init;
        this.createdCallback = this._init;
    }
    _init () {
        if(this.initialized) return;
        this.initialized = true;
        this.style.display = "block";
        this.appendChild(document.createElement('div'));
    }
}
document.registerElement('list-box', {
    prototype: listBox
});

但是我收到错误 Class extends value #<HTMLElement> is not a constructor or null。所以现在我被卡住了，找不到使用类来构造自定义 HTML 元素的方法。

为了简化：

如何使用 JS 类创建自定义元素来创建元素的属性？

【问题讨论】：

这感觉像是一个可以通过阅读developer.mozilla.org/en-US/docs/Web/Web_Components/…来避免的问题
oml :P 当我第一次学习如何创建元素时，我确实读过那篇文章。 TYSM 将我重定向到那里。我觉得自己像个白痴。
有时会发生。可能值得再次删除问题=)
错误是由class listBox extends HTMLElement.prototype这行引起的。应该是class listBox extends HTMLElement。

标签： javascript html class custom-element

【解决方案1】：

这是一个创建自定义元素的示例

  //ListBox.js
  export default class ListBox extends HTMLElement {
  // observe attributes of custom element
  static get observedAttributes() {
    return ["disp", "text"];
  }

  get myAction() {
    return this.hasAttribute("open");
  }

  set myAction(val) {
    if (val) {
      this.setAttribute("open", "");
    } else {
      this.removeAttribute("open");
    }
  }

  constructor() {
    super();
    this.initialized = false;
    this.div = document.createElement("div");
    // get and assigns value from props "disp"
    this.div.style.display = this.getAttribute("disp");
    // get and assigns value from props "text"
    this.div.innerHTML = this.getAttribute("text");
    this.appendChild(this.div);
  }
  connectedCallback() {
    // didMount
    // your methode here
    this.initialized = true;
    console.log("custom element added to page");
  }

  disconnectedCallback() {
    // unmount
    console.log("custom element remove from page");
  }

  attributeChangedCallback(name, oldValue, newValue) {
    // observed props
    console.log("props", arguments);
    // get and assigns value from props "text"
    if (name === "text" && oldValue !== newValue) {
      this.div.innerHTML = newValue;
    }
  }
}

在调用 index.js 的脚本标记中的 html 中添加 type="module"

<!DOCTYPE html>
<html>
  <head>
  </head>

  <body>
    <div id="app">
      <list-box text="Some text here" disp="block"></list-box>
    </div>
    <script src="src/index.js" type="module"></script>
  </body>
</html>

在你的 index.js 中导入你的组件并做一些事情

import ListBox from "./component/ListBox";

customElements.define("list-box", ListBox);

// change props "text value"
document
  .querySelector("list-box")
  .setAttribute("text", `Change the value of props "text"`);

【讨论】：