如何使用 JS 类创建自定义元素以创建元素的属性 [英] How do I create a custom element using a JS class to create the properties for the element

问题描述

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

let menuPicker = Object.create(HTMLElement.prototype);menuPicker.initialized = false;menuPicker._init = function(){...}...menuPicker.attachedCallback = menuPicker._init;menuPicker.createdCallback = menuPicker._init;...document.registerElement('菜单选择器', {原型:菜单选择器});

哪个有效，但这次我想要一个 JS 类.特别是这个功能:

类测试{获取项目(){...}设置项目(){...}}

所以我想我可以做以下事情来轻松实现这一点.

class listBox 扩展 HTMLElement.prototype {初始化 = 假；构造函数(道具){超级(道具)；this.attachedCallback = this._init;this.createdCallback = this._init;}_在里面 () {if(this.initialized) 返回；this.initialized = true;this.style.display = "块";this.appendChild(document.createElement('div'));}}document.registerElement('列表框', {原型:列表框});

但是我收到错误 Class extends value #不是构造函数或 null.所以现在我卡住了，找不到使用类来构造自定义 HTML 元素的方法.

为了简化:

<块引用>

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

解决方案

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

//ListBox.js导出默认类 ListBox 扩展 HTMLElement {//观察自定义元素的属性静态获取观察属性(){返回 [显示"，文本"]；}获取 myAction() {返回 this.hasAttribute("open");}设置 myAction(val) {如果(瓦尔){this.setAttribute("打开", "");} 别的 {this.removeAttribute("打开");}}构造函数(){极好的();this.initialized = false;this.div = document.createElement("div");//从 props "disp" 获取和赋值this.div.style.display = this.getAttribute("disp");//从 props "text" 获取和赋值this.div.innerHTML = this.getAttribute("text");this.appendChild(this.div);}连接回调(){//挂载//你的方法在这里this.initialized = true;console.log("自定义元素添加到页面");}disconnectedCallback() {//卸载console.log("自定义元素从页面中删除");}attributeChangedCallback(名称，旧值，新值){//观察到的道具console.log("道具", 参数);//从 props "text" 获取和赋值if (name === "text" && oldValue !== newValue) {this.div.innerHTML = newValue;}}}

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

<头><身体><div id="应用程序"><list-box text="这里有一些文本" disp="block"></list-box>

<script src="src/index.js" type="module"></script></html>

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

从./component/ListBox"导入ListBox；customElements.define("list-box", ListBox);//改变道具文本值"文档.querySelector("列表框").setAttribute("text", `改变 props "text"`);

So I know how to create a custom element and have 2 already made that I'm happy with. My two elems look something like this:

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

Which works and all, but this time around I want a JS class. Specifically this feature:

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

So I figured I could just do the following to easily implement this.

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

However I get the error Class extends value #<HTMLElement> is not a constructor or null. So now I'm stuck and can't find a method of using a class to construct a custom HTML element.

To simplify:

How do I create a custom element using a JS class to create the properties for the element?

解决方案

Here is an example to create a custom element

  //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;
    }
  }
}

in your html in the script tag which calls your index.js add 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>

In your index.js import your component and do Something

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

这篇关于如何使用 JS 类创建自定义元素以创建元素的属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！