Создание пользовательского ввода с веб-компонентами - PullRequest
Новая
       26

Создание пользовательского ввода с веб-компонентами

0 голосов
/ 28 февраля 2019

Я хочу создать свой собственный набор HTML-элементов с веб-компонентами, которые включают в себя некоторые базовые функции.Я хотел начать с ввода, и кажется, что есть две возможности: либо наследовать от HTMLElement, либо от HTMLInputElement.

Опция A: 

class BasicCustomHTMLElement extends HTMLElement {
  //basic functionality
}

class CustomInput extends BasicCustomHTMLElement {
  let shadow = this.attachShadow({
    mode: 'open'
  });

  let textbox = document.createElement("input");
  shadow.appendChild(textbox);
}

Опция B 

class CustomInput extends HTMLInputElement {

}

Моя проблема с вариантом B заключается в том, что у меня нет основной class, где я могу определить основные функции.С другой стороны, я должен переписать код в варианте A для функциональности, которую предоставляют собственные элементы ввода и выбора.

Есть ли некоторые аспекты, которые я пропускаю?

1 Ответ

0 голосов
/ 01 марта 2019

Нет причин, по которым вы не можете объединить вариант A и вариант B, чтобы сначала расширить с HTMLInputElement базовым классом, а затем расширить с помощью более конкретных классов. 

class BasicCustomHTMLElement extends HTMLInputElement {
}

class CustomInput extends BasicCustomHTMLElement {
}

Если вы хотите, чтобы общий набор функций расширял ряд встроенных классов, вы можете использовать mixins . 

const BaseClassMixin = (superclass) => class extends superclass {
};

class CustomInput extends BaseClassMixin(HTMLInputElement) {
}

class CustomTextArea extends BaseClassMixin(HTMLTextAreaElement) {
}

Однако в настоящее время только Chrome поддерживает расширение встроенныхв элементах , поэтому не рекомендуется для реального использования.

...