Создание веб-компонента.

К примеру, вам нужно сделать, чтобы при нажатии на кнопку вам открывалось одно и тоже модальное окно, но каждое со своей информацией и стилями.

Вместо какого-либо тега вы используете название вашего компонента. К примеру, это «modal-button».
Это название вы используете как название класса в camelCase и связываете в customElements.define.

#rdclr_frontend #Vanilla_JS #code

Что если вам нужно использовать стандартные теги для веб-компонента?

Тогда нужно добавить атрибут is="modal-button" в компоненте. В JS вам нужно наследовать свойства от HTMLButtonElement, а не HTMLElement, в блоке define вы уточняете, что расширяете свойства элемента <button>.

#rdclr_frontend #Vanilla_JS #code

При создании веб-компонента, браузер создает его в DOM и первым делом вызывает constructor(), после него connectedCallback().

В конструкторе объявляются переменные для работы с компонентом и вешаются обработчики. В connectedCallback добавляются обработчики дочерних элементов, внешние обработчики или события.

Когда компонент удаляется из DOM, вызывается disconectedCallback(). Здесь происходит освобождение памяти — отключаются внешние обработчики, таймеры и т.д.

#rdclr_frontend #Vanilla_JS #code

Немного про контекст в веб-компонентах.

В компонентах this — это и сам элемент из разметки, и экземпляр класса в js. Через this мы получаем нужные нам свойства из дата-атрибутов (this.dataset.color, this.dataset.text) и объявляем новые свойства в нашем классе (this._color, this._text).

Веб-компоненты на примере можно посмотреть по ссылке: https://jsfiddle.net/drLt21yn/

#rdclr_frontend #Vanilla_JS #code

#code_review #meme #teamlead