botFOSDEM 2026 – 웹 컴포넌트의 활용: 프레임워크 관점에서의 접근 (Lustre와 Gleam을 중심으로)
웹 컴포넌트는 플랫폼 상호운용성과 도구 단순화라는 장점에도 불구하고, 프레임워크 저자들 사이에서 추상화 수준과 런타임 복잡성 문제로 인해 논쟁의 대상이 되고 있습니다.
HabrМультиверсионный UI-кит с RWC: один JS-API для разных веб-компонентов
Замена одной кнопки не должна тянуть за собой весь React. В RWC — не тянет. Каждый компонент RWC — самостоятельный Custom Element. Он не зависит от рантайма хоста и работает внутри React-дерева, Angular-приложения или чистого HTML. Поэтому старый React-компонент и новая RWC-кнопка живут на одной странице одновременно. На практике: UI-кит мигрируется покомпонентно, по одному виджету за спринт. Без feature-freeze, без второго рантайма фреймворка и параллельной сборки ради сосуществования версий. Единица изоляции здесь — сам компонент, а не application runtime.
https://habr.com/ru/articles/1048416/
#javascript #typescript #custom_elements #web_components #signal #uikit
Custom Elements Collection: 147 компонентов двумя строками через CDN
Как создавать веб-страницы без фреймворков, сборщиков и другого зоопарка. Технология Custom Elements появилась в браузерах в 2018-2020 годах, но долгое время незаслуженно обходилась стороной сообществом, в связи со сложностью разработки компонентов. Однако ничто не мешает использовать уже созданные компоненты с любым фреймворком. Об этом и пойдёт речь.
https://habr.com/ru/articles/1042520/
#custom_elements #web_components #custom_elements_collection #vanillajs
bot에셋 파이프라인 거부하기: 바닐라 웹 기술로의 회귀
에셋 파이프라인의 핵심 기능인 지문 생성과 캐시 무효화는 복잡한 빌드 과정 없이도 쿼리 스트링과 서버 측 경로 재작성으로 대체 가능하다.
Mastodon 웹 컴포넌트를 활용한 블로그 댓글 시스템 통합
Mike Perham은 dpecos가 개발한 mastodon-comments 웹 컴포넌트를 도입하여 자신의 블로그에 Mastodon 기반 댓글 기능을 추가했다.
Что всё таки не так с веб компонентами
Господа, продолжаем разбиратся в тонкостях веб компонент. Сделал тут бенч - сравнениe фреймворков ( $mol/lit/symbiot ) по todomcv. Вроде говорим об одном, а бенч о другом, разве не так ? Ан-нет, что бы разобраться с веб компонентами нужны фреймворки которые ставят их во главу угла, те, кто "сделал на них ставку". Вот что мне удалось понять: Первое. Память: 124 байта на веб-компонент, и 16 байт на JS object. Разница на порядок, это много, и без виртуализации интерфейс скорее всего будет лагать Что не так то опять ?)
https://habr.com/ru/articles/1019420/
#shadow_dom #web_components #custom_elements #lit #symbiotejs #$mol
Что не так с веб-компонентами?
Если кратко - да все с ними ТАК . Это замечательный набор современных браузерных технологий, для решения реальных задач веб-разработки. Веб-компоненты позволяют делать очень многое, более просто и элегантно, чем это было бы без них. А главное, они позволяют, с потрясающей гибкостью, решать задачи “со звездочкой” - те, которые немного выходят за рамки и требуют более творческого подхода от разработчика. Почему-же тогда по Хабру гуляют, кхм… некие одиозные личности (не будем показывать пальцем) и рассказывают нам про то, что веб-компоненты это ужас-ужас и полный провал? Давайте разберемся.
https://habr.com/ru/articles/1019206/
#custom_elements #shadow_dom #symbiotejs #web_components #Lit
Что не так с веб-компонентами?
Здравствуйте, меня зовут Дмитрий Карловский, и я пилил веб-компоненты , когда их ещё не придумали, делал полноценные компоненты на AngularJS, когда там ещё были только директивы, и разработал компоненто-ориентированный фреймворк $mol с инверсией контроля и статической типизацией, когда это ещё не было мейнстримом. Короче, я немного в теме. И сейчас я расскажу вам, почему мы сразу отказались от Web Components и почему у них нет никаких перспектив. ✔ Готов получить сарказм
Ultimate guide по веб-компонентам
Синхронизация атрибутов элемента с DOM-свойствами Очевидно, что нашему компоненту потребуются атрибуты, через которые пользователь сможет контролировать его поведение. Наш компонент должен вести себя как стандартный элемент ввода типа «input», поэтому обязательно должен поддерживать такие атрибуты как disabled и required – и это самый минимум. Поэтому важно разобраться (ну или вспомнить) что такое «content vs IDL attributes», и как с этим работать. Документация по веб-компонентам мало говорит об атрибутах, разве что рекомендует использовать attributeChangedCallback() для наблюдения за ними, но этого недостаточно. Хотя это полезное API, нам оно не подходит, потому что оно уведомляет нас о уже совершенном действии (изменении атрибута), а нам нужно контролировать этот процесс, то есть – синхронизировать атрибуты и свойства с нормализацией значений. Так как наш компонент наследует базовый класс HTMLElement, а в нем уже реализовано большое количество разных методов, то мы можем переопределить некоторые из них чтобы получить нужный нам результат. Для начала определим наши свойства в виде пар get/set и значения в приватном поле:
Как мы победили утечки памяти в реактивных веб-компонентах (RWC)
Вкладки браузера разрастались до 5 ГБ. Причина — эффекты в реактивной системе, которые продолжали жить после удаления компонентов из DOM: подписки на сигналы не очищались, замыкания удерживали ссылки на мёртвые узлы, а каждый переход по SPA множил «призрачные» обновления. Разбираем, как иерархия parent-child эффектов, привязка к disconnectedCallback через effectSet и WeakRef полностью решили проблему — без ручного управления подписками
https://habr.com/ru/articles/1002708/
#javascript #custom_elements #typescript #web_components #signal #effect
