Как создать пользовательский элемент, используя класс JS для создания свойств для элемента - PullRequest
Новая
       19

Как создать пользовательский элемент, используя класс JS для создания свойств для элемента

0 голосов
/ 04 февраля 2020

Итак, я знаю, как создать пользовательский элемент, и я уже сделал 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 для создания свойств элемента?

1 Ответ

1 голос
/ 04 февраля 2020

Вот пример создания пользовательского элемента 

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

в вашем html в теге сценария, который вызывает ваш индекс. js add type = "module" 

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

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

В вашем индексе. 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"`);
...