Ultimate guide по веб-компонентам

Синхронизация атрибутов элемента с DOM-свойствами Очевидно, что нашему компоненту потребуются атрибуты, через которые пользователь сможет контролировать его поведение. Наш компонент должен вести себя как стандартный элемент ввода типа «input», поэтому обязательно должен поддерживать такие атрибуты как disabled и required – и это самый минимум. Поэтому важно разобраться (ну или вспомнить) что такое «content vs IDL attributes», и как с этим работать. Документация по веб-компонентам мало говорит об атрибутах, разве что рекомендует использовать attributeChangedCallback() для наблюдения за ними, но этого недостаточно. Хотя это полезное API, нам оно не подходит, потому что оно уведомляет нас о уже совершенном действии (изменении атрибута), а нам нужно контролировать этот процесс, то есть – синхронизировать атрибуты и свойства с нормализацией значений. Так как наш компонент наследует базовый класс HTMLElement, а в нем уже реализовано большое количество разных методов, то мы можем переопределить некоторые из них чтобы получить нужный нам результат. Для начала определим наши свойства в виде пар get/set и значения в приватном поле:

https://habr.com/ru/articles/994666/

#вебкомпоненты #web_components #html_elements #combobox

Как мы победили утечки памяти в реактивных веб-компонентах (RWC)

Вкладки браузера разрастались до 5 ГБ. Причина — эффекты в реактивной системе, которые продолжали жить после удаления компонентов из DOM: подписки на сигналы не очищались, замыкания удерживали ссылки на мёртвые узлы, а каждый переход по SPA множил «призрачные» обновления. Разбираем, как иерархия parent-child эффектов, привязка к disconnectedCallback через effectSet и WeakRef полностью решили проблему — без ручного управления подписками

https://habr.com/ru/articles/1002708/

#javascript #custom_elements #typescript #web_components #signal #effect

Reactive Web Components: реактивность без фреймворка

После работы с React/Vue/Angular захотелось вернуться к основам, но с современными возможностями. Сделал RWC — библиотеку реактивных веб-компонентов. Ключевые преимущества: • Совместимость — компоненты работают в любом проекте • Производительность (сигналы для реактивности) — точечные обновления DOM • Простота — минимальный API, легко обучать команду • TypeScript-first — типизация из коробки без костылей Компоненты, написанные на RWC, можно встроить в React, Vue, Angular или даже legacy jQuery-проект. Никакого vendor lock-in. Библиотека весит <10KB, компоненты работают в любом проекте.

https://habr.com/ru/articles/968384/

#javascript #custom_elements #typescript #web_components #signal

Slider с использованием Web Components + Shadow Dom

Пишем Slider с Web Components В этой статье мы создали полнофункциональный слайдер, используя современные веб-стандарты. Мы не только реализовали базовую логику, но и освоили ключевые концепции: - Работу с Shadow DOM для изоляции стилей и структуры - Использование слотов для композиции контента - Реакцию на атрибуты для настройки поведения компонента - Организацию жизненного цикла через connectedCallback

https://habr.com/ru/articles/964180/

#Web_Components #Shadow_Dom #Declarative_Shadow_Dom

Гайд по Веб Компонентам (Web Components)

Компонентно-ориентированный подход уже давно зарекомендовал себя как отличная практика разработки. Его массовая популярность пришла вместе с такими библиотеками, как React и Vue. Создавая компоненты, мы чётко разграничиваем логику, формируем зоны ответственности и эффективно боремся с дублированием кода. Обычно компонент отвечает за рендеринг HTML-разметки и динамически обновляет её в зависимости от своего состояния. Кроме того, ключевую роль играют механизмы контроля жизненного цикла, например, обработка этапов: «компонент присоединился», «компонент обновился» и «компонент был удалён». Это база, но часто существует и множество других хуков. Раньше для работы с этой парадигмой мы были вынуждены использовать React, Vue или аналогичные фреймворки. Однако сегодня можно обойтись без дополнительных библиотек и обязательной сложной сборки, потому что компоненты доступны «из коробки» в современных браузерах. Да, я говорю о Веб-компонентах . Если быть точнее, о Пользовательских элементах (Custom Elements) , поскольку «Веб-компоненты» — это скорее набор стандартных технологий, позволяющих создавать эти самые элементы.

https://habr.com/ru/articles/962956/

#web_components #веб_компоненты

The more I work on #ONI, which is basically a web components frontend for an as basic as possible #ActivityPub client to server service, the more I realize I'm just not built for JavaScript programming.

Despite having put in the hours every day for a number of months, the whole Promise paradigm just doesn't seem to click for me.

Now I'm struggling to create a throbber component (easy) while fetches happen in the background (easy) and then have it replaced (not easy) by actual content (easy).

😱 Gaaah!!!

#frontend #web_components #litjs #JavasScript

I’m still sitting here and waiting for everyone else to admit, that Web components was a mistake 🐱☕

#lang_en #web #browsers #Web_components

А что, так можно было?

Привет Хабр! Меня зовут Алекс, и я автор фронтенд-библиотеки для создания UI-компонентов-агностиков - Symbiote.js . Я не единственный разработчик, но главный контрибьютор и тот, кто отвечает за концепцию, развитие, документацию, деврел, DX все остальное. Мейнтейнер то есть. Всем этим я занимаюсь в свободное от другой работы время, на которой я фуллстек, R&D-инженер и техлид. Сегодня, я бы хотел рассказать о том, как появился Симбиот, и почему он вообще существует, при наличии огромного зоопарка библиотек и фреймворков для фронтенда, с куда более значительной аудиторией и поддержкой от крупных IT-компаний. Ведь мы, инженеры, очень НЕ любим, когда вокруг нас начинают плодиться лишние сущности, и сразу начинаем угрожающе размахивать бритвой Оккама. Верно? (хитро прищурился)

https://habr.com/ru/articles/846396/

#web_components #symbiotejs #javascript #custom_elements #shadow_dom #react #redux #nextjs #web_developement #frontend

HTML-теги с искусственным интеллектом

Всем привет! Помните череду недавних анонсов от IT-гигантов, о различном ИИ-функционале, внедренном во все, что только можно? Среди этих анонсов, например, были помощники в написании текстов писем и сообщений для почтовых и других сервисов. Эти помощники могут проверить вас на ошибки, перевести текст на другой язык, поменять тональность и настроение текста, сделать его более кратким, либо, напротив, дополнить. На мой скромный взгляд, сейчас складывается такая ситуация, что создавать собственные ИИ-сервисы общего назначения очень рискованно, ибо крупным компаниям не составит труда воспроизвести ваш функционал, имея доступ к более значительным ресурсам, как вычислительным, так и в плане данных. Но и у нас, независимых разработчиков и энтузиастов, есть свои преимущества: мы можем создавать решения на уровне библиотек и компонентов, которые будут способны размыть и скорректировать разницу в конкурентных преимуществах, между гигантами и мелкими стартапами. Итак, в этом материале, я предлагаю вам вместе со мной создать умный HTML-тег - текстовое поле, которое сможет помогать пользователю в настройке введенного текста. Этот тег можно будет использовать на любом сайте, в любом веб-приложении, созданном с помощью любого современного фреймворка, или даже, в простом статическом HTML-файле.

https://habr.com/ru/articles/842044/

#artificial_intelligence #html #web_components #chatgpt #javascript_library #symbiotejs #widgets #llm #api #generative_models

“Web components” is a spec for big corps. Your website is not that complex. If it is, maybe it should not be.

#lang_en #web #html #thoughts #web_components