Пример создания собственного веб-компонента без использования фрэймворков


Веб-компоненты
Учебный пример проведёт вас сквозь создание собственного HTML5 тэга <howto-checkbox> реализующего элемент ввода "флажок", который позволяет пользователю переключать себя между двумя состояниями.

Исходный пример вы можете посмотреть здесь.

При создании элемент устанавливает атрибуты role = "checkbox" и tabindex = "0", которые позволяют использовать его с клавиатурой и такими технологиями, как устройство чтения с экрана. Более подробное описание можно найти по ссылкам в исходном примере.

В примере не реализована отправка данных в составе блока <form>.

Когда флажок установлен, он добавляет логический атрибут checked и устанавливает его значение в true. Также, элемент устанавливает атрибут aria-checked. Щелчок по элементу с помощью мыши или пробела переключает состояние между true и false.

Флажок также поддерживает отключенное состояние. Если указано свойство disabled = "true" или атрибут disabled, флажок устанавливает aria-disabled = "true", удаляет атрибут tabindex и убирает фокус с себя.

Полный JavaScript код элемента с комментариями:

// Инкапсулируем код в анонимную функцию
(function() {
// Установим код кнопки клавиатуры для переключения
const KEYCODE = {
SPACE: 32,
};

// Клонирование содержимого из шаблона лучше использования
// innerHTML при создании элемента тк не требуется многократно
// парсить содержимое.
const template = document.createElement('template');
template.innerHTML = `

:host {
display: inline-block;
// Картинки необходимо взять по ссылке из исходного примера
background: url('../images/unchecked-checkbox.svg') no-repeat;
background-size: contain;
width: 24px;
height: 24px;
}
:host([hidden]) {
display: none;
}
:host([checked]) {
background: url('../images/checked-checkbox.svg') no-repeat;
background-size: contain;
}
:host([disabled]) {
background:
url('../images/unchecked-checkbox-disabled.svg') no-repeat;
background-size: contain;
}
:host([checked][disabled]) {
background:
url('../images/checked-checkbox-disabled.svg') no-repeat;
background-size: contain;
}

`;

class HowToCheckbox extends HTMLElement {
static get observedAttributes() {
return ['checked', 'disabled'];
}

// Конструктор запускается при создании элемента в документе.
// Объекты класса могут быть созданы:
// - при разборе HTML, если встречен тэг <howto-checkbox>,
// - при вызове document.createElement('howto-checkbox'),
// - при вызове конструктора new HowToCheckbox();
// Конструктор - хорошее место для создания теневого DOM, но не следует
// использовать атрибуты и DOM потомков, тк они ещё не доступны.
constructor() {
super();
this.attachShadow({mode: 'open'});
this.shadowRoot.appendChild(template.content.cloneNode(true));
}

// connectedCallback() исполняется при вставке элемента в DOM.
// Это хорошее место для инициализации атрибутов и обработчиков
// событий.
connectedCallback() {
if (!this.hasAttribute('role'))
this.setAttribute('role', 'checkbox');
if (!this.hasAttribute('tabindex'))
this.setAttribute('tabindex', 0);

// Пользователь может установить свойства элемента до того, как
// прототип будет соединён с классом. Метод _upgradeProperty()
// проверяет свойства элемента и запускает для них верные сэттеры.
this._upgradeProperty('checked');
this._upgradeProperty('disabled');

this.addEventListener('keyup', this._onKeyUp);
this.addEventListener('click', this._onClick);
}

_upgradeProperty(prop) {
if (this.hasOwnProperty(prop)) {
let value = this[prop];
delete this[prop];
this[prop] = value;
}
}

// disconnectedCallback() исполняется при удалении элемента из DOM.
// Это хорошее место для удаления ссылок и обработчиков событий.
disconnectedCallback() {
this.removeEventListener('keyup', this._onKeyUp);
this.removeEventListener('click', this._onClick);
}

// Свойства и связанные с ними атрибуты тэгов должны отражать друг друга.
// Сэттер связывающий свойство логического состояния и атрибут тэга.
set checked(value) {
const isChecked = Boolean(value);
if (isChecked)
this.setAttribute('checked', '');
else
this.removeAttribute('checked');
}

get checked() {
return this.hasAttribute('checked');
}

set disabled(value) {
const isDisabled = Boolean(value);
if (isDisabled)
this.setAttribute('disabled', '');
else
this.removeAttribute('disabled');
}

get disabled() {
return this.hasAttribute('disabled');
}

// attributeChangedCallback() исполняется когда любой из атрибутов
// в списке был изменён. Это хорошее место для обработки побочных
// эффектов изменения данных, таких как установка ARIA атрибутов.
attributeChangedCallback(name, oldValue, newValue) {
const hasValue = newValue !== null;
switch (name) {
case 'checked':
this.setAttribute('aria-checked', hasValue);
break;
case 'disabled':
this.setAttribute('aria-disabled', hasValue);

// Атрибут tabindex мешает удалению фокуса c элемента.
// Элементы с tabindex=-1 могут остаться в фокусе из-за указателя
// мыши или по вызову focus(). Для уверенности что элемент
// отключен и не в фокусе удаляем атрибут tabindex.
if (hasValue) {
this.removeAttribute('tabindex');

// Если элемент в фокусе, вызываем HTMLElement.blur()
this.blur();
} else {
this.setAttribute('tabindex', '0');
}
break;
}
}

_onKeyUp(event) {

// Не обрабатывать вспомогательные комбинации клавиш
if (event.altKey)
return;

switch (event.keyCode) {
case KEYCODE.SPACE:
event.preventDefault();
this._toggleChecked();
break;

// Игнорируем не указанные коды кнопок
default:
return;
}
}

_onClick(event) {
this._toggleChecked();
}

// _toggleChecked() вызывает сэттер и переворачивает состояние флага.
// Т.к. _toggleChecked() исполняется только по действию пользователя,
// то метод также генерирует событие изменения состояния.
// Режим bubbles используется для большей схожести с <input >.
_toggleChecked() {
if (this.disabled)
return;
this.checked = !this.checked;
this.dispatchEvent(new CustomEvent('change', {
detail: {
checked: this.checked,
},
bubbles: true,
}));
}
}

window.customElements.define('howto-checkbox', HowToCheckbox);
})();

Пример использования в HTML:


howto-checkbox {
vertical-align: middle;
}
howto-label {
vertical-align: middle;
display: inline-block;
font-weight: bold;
font-family: sans-serif;
font-size: 20px;
margin-left: 8px;
}

<howto-checkbox id="join-checkbox"></howto-checkbox>
<howto-label >Join Newsletter</howto-label>


Comments 0