Red Collar | DEV

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

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

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

#rdclr_frontend #Vanilla_JS #code

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

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

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

#rdclr_frontend #Vanilla_JS #code

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

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

#rdclr_frontend #Vanilla_JS #code

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

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

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

#rdclr_frontend #Vanilla_JS #code

Всем привет! Меня зовут Даша и на этой неделе я пишу от лица разработки Red Collar. Сейчас я фронт и пишу на ванильном JS. Сегодня мы с вами будем говорить о веб-компонентах.

Веб-компоненты — это набор технологий, позволяющих создавать собственные компоненты. Эти элементы не повлияют на остальной код вашего приложения, переиспользуются и настраиваются так, как нужно вам. По сути, мы будем создавать свои теги или расширять свойства существующих.

Как они могут вам помочь? Вы научитесь разбивать свой код на компоненты и переиспользовать их. Вместо того, чтобы описывать каждый блок отдельно, вы пишете один обработчик и меняете какие-то детали, что упрощает код и ускоряет разработку.

#rdclr_frontend #Vanilla_JS

Red Collar | DEV pinned «Всем привет! Это разработческий канал от сотрудников Red Collar. Каждую неделю один из сотрудников компании рассказывает о своих задачах, сложностях, решениях, делится полезными ссылками и мыслями на тему разработки. Стремимся применять современные языки…»

Всем привет! Это разработческий канал от сотрудников Red Collar.
Каждую неделю один из сотрудников компании рассказывает о своих задачах, сложностях, решениях, делится полезными ссылками и мыслями на тему разработки.

Стремимся применять современные языки и новые подходы в разработке, ценим качественную работу, любим сложные задачи и открыты к критике, если вы тоже — мы на одной волне. :)

В компании занимаемся двумя направлениями:
- Разработкой сложных продуктов, сервисов для сотен тысяч пользователей для ведущих финтех-, телеком-, IT-, HoReCa- и логистических компаний.
- Созданием эстетичных корпоративных и промосайтов, которые становятся лучшими в своей сфере и берут самые сложные международные награды.

По тегам можно найти темы:
#rdclr_frontend — #Vanilla_JS #JavaScript #React #WebGL

#rdclr_backend — #Java #Python #PHP #NN

#rdclr_DevOps

#rdclr_QA

#product (мысли, применимые к сервисно-продуктовым историям)
#aesthetic (про эстетичность интерфейсов) #teamlead — про роль, практики и рост в тим-лида
#optimization (про оптимизацию кода для скорости и плавности работы проекта) и #library (набор инструментов для упрощения жизни разработчика)
#read (полезные ссылки для изучения нового материала)
#meme (на посмеяться) и #news (новости)

Чтобы совместить два тега — введите оба в поисковую строку канала.

Channel photo updated

Channel created