Что не так с веб-компонентами?

Не знаю почему вас удивил низкоуровневый код на js. Это база.

Что не так с веб-компонентами?

Реактивность может быть реализована с помощью внешних библиотек, например, mobx.

Код под спойлером

const { observable, autorun, action } = mobx;

class ReactiveCounter extends HTMLElement {
    constructor() {
        super();
        // Создаём наблюдаемое состояние
        this.state = observable({
            count: 0,
        });

        this.attachShadow({ mode: 'open' });
        this.shadowRoot.innerHTML = `
      <div>
          <button id="decr">−</button>
          <span class="value" id="display">0</span>
          <button id="incr">+</button>
      </div>`;

        this.displaySpan = this.shadowRoot.getElementById('display');
        this.incrBtn = this.shadowRoot.getElementById('incr');
        this.decrBtn = this.shadowRoot.getElementById('decr');

        this.increment = action(() => {
            this.state.count++;
        });

        this.decrement = action(() => {
            this.state.count--;
        });

        this.incrBtn.addEventListener('click', this.increment);
        this.decrBtn.addEventListener('click', this.decrement);

        // Настраиваем реакцию: при изменении state.count обновляем текст
        this.disposeAutorun = autorun(() => {
            this.displaySpan.textContent = this.state.count;
        });
    }

    // При удалении компонента из DOM отписываемся от реакций
    disconnectedCallback() {
        if (this.disposeAutorun) {
            this.disposeAutorun();
        }
        this.incrBtn.removeEventListener('click', this.increment);
        this.decrBtn.removeEventListener('click', this.decrement);
    }
}

// Регистрируем кастомный элемент
customElements.define('reactive-counter', ReactiveCounter);

Что не так с веб-компонентами?

Спасибо за публикацию! Полезно.

Добавлю.

Например, в такой наивной реализации свойства могут быть только строковыми.

Строковые, потому что вы setAttribute используете, что необязательно. А так, у классов веб-компонент возможности такие же, как и у обычных js-классов. Вот пример когда свойство - объект. Специально добавил connectedCallback, чтобы отобразить его в виде текстовой ноды.

      class MyFoo extends HTMLElement {
        connectedCallback() {
          this.textContent = this.bar.foo;
        }
        bar = { foo: 1337 };
      }

      globalThis.customElements.define("my-foo", MyFoo);
      const element = new MyFoo();
      console.log(element.bar.foo);
      // 1337

Правило 3-2-1: почему базовый принцип резервного копирования перестал быть достаточным

Бекапы потом локально хранятся или тоже отправляются в разные облака?

Эффективная защита резервных копий от целевых атак

Целый ИИ нужен, чтобы понять, что архив бэкапов затирается.

Как придумать надежный пароль и не забыть его

Таких менеджеров паролей нет что ли?

Удалил сервер из мессенджера. Как общаться по P2P в 2026 году без метаданных и Google Services. Личный опыт и KMP

Абсолютно согласен. Конфиденциальность как-то не бьётся с реалтаймовым p2p и отсутствием верификации (читай как риск mim).

Удалил сервер из мессенджера. Как общаться по P2P в 2026 году без метаданных и Google Services. Личный опыт и KMP

Вообще, было бы интересно почитать о безопасности stun и turn серверов. Без них никакого p2p нет.

Теория мёртвых телеграм-каналов: почему 90% каналов не преодолеют планку в 50 подписчиков

Если взять Хабр, то рандомный автор публикуется редко, но по своей совокупности материалы таких авторов создают разнообразный контент на протяжении длительного периода времени. И самое главное, что эти публикации попадают в общую ленту.

Взять любой канал в телеге, если это не юмор, не новости, то читаешь узкоспециализированную инфу. Рано или поздно наступает перенасыщение. И канал автора становится неинтересен. Аналог ленты в телеге - это папки, которые состоят из тех каналов, которые пробились через информационный шум. И в этой папке-ленте нет места для новых рандомных каналов, я о них никогда не узнаю. Да и папка с подборкой каналов также с течением времени становится неинтересной. Не хватает рекомендаций рандомного канала.

Fury Messenger: От «семейного чата» до народного мессенджера (или как я перестал спать и начал фиксить баги)

Пиринговый webrtc существенно помогает в решении проблемы нехватки ресурсов.

От голосовых к тексту: делаем Telegram-бота для расшифровки аудио на open source модели от СБЕР — GigaAM-v3

Прикольно. Нейронка локальная или расшифровка через облако? В опенсорсе есть она? Интересно было бы посмотреть ее.

Большой разворот: как изменился стек технологий в российском IT после 2022 года

Постгрес выбирают, потому что в некоторых организациях требуют использовать ПО из реестра. Плюс официальная техподдержка.

Как молодой девушке уехать на Яндекс.Такси в промзону и пропасть среди гаражей

В Яндекс.Такси можно было бы завести семейные учётные записи, чтобы получать информацию об истории передвижения связанных аккаунтов. С возможностью не делиться информацией по конкретным поездкам.

Я думаю, что внутреннюю проверку по линии безопасности они сразу провели, увидели, что проблемы нет: довезли, высадили. И с водителем поговорили. Поэтому их поведение мне полностью понятно. В том числе нежелание предоставить информацию о передвижении клиентов посторонним.

А супруге можно было бы подарить смарт часы или фитнес браслет, чтобы при звонке вибрировал на руке, когда телефон лежит в сумке.

Self-hosted связь со своей семьей

Все круто! Спасибо, что делитесь. Нет ли проблемы рассинхрона видео и аудио потоков?

Как я делал open-source проект, перевёл его на коммерческие лицензии — и это было моим самым лучшим решением

Согласен. А еще спасает мысль о том, что в чужом коде программистам будет тяжело разобраться, проще обратиться к разработчику напрямую.

Сейчас, на всякий, рассматриваем KPHP (разработка VK) - он позволяет компилировать php-код в бинарник.

Как я делал open-source проект, перевёл его на коммерческие лицензии — и это было моим самым лучшим решением

Очень классно написали. Спасибо.

Скажите, а рассматривали ли вы возможность технической защиты программного кода? Не посещала ли мысль, что кто-то один купит лицензию, а потом по рукам распространит версию Про со всеми наворотами?

Первая в мире библиотека Web Components в духе shadcn. Серьёзно, я проверял

Не всё нужно отображать

Веб-компоненты - это просто кастомные DOM-элементы, поэтому и жизненный цикл начинается с connectedCallback.

В веб компонентах логика отображения смешивается с обычной логикой работы

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

Там только строки, в атрибутах, нет типизация получается, вот это и плохо

Если работать только через атрибуты, то, конечно, будут строки. И это потому что разметка страницы - это текст. Если же идет речь о том, как передать объект компоненту для его обработки, то пропишите соответствующий метод или свойство в классе веб-компонента, и вызывайте потом в коде.

adoptedStyleSheets - Есть решение лучше, чем писать стили в js

adoptedStyleSheets используется для подключения текстового содержимого в качестве css-таблицы в тень элемента. Причем это делается в connectedCallback. Само же содержимое стиля может быть вынесено в отдельный esm-модуль. Так что смешения тут никакого нет. Да и логика существования самого веб-компонента не нарушена. Потому что веб-компонент - это все-таки про вьюху.

Первая в мире библиотека Web Components в духе shadcn. Серьёзно, я проверял

+1. Действительно! Я-то думал, что будущее уже наступило и все давно поддерживается) Вот оно что. Тогда только кастомное имя остаётся.

https://caniuse.com/mdn-html_global_attributes_is

Первая в мире библиотека Web Components в духе shadcn. Серьёзно, я проверял

Спасибо, что делитесь опытом, интересная работа.

Кстати, а почему всё-таки от ваниллы отказались? С какими сложностями столкнулись?

Первая в мире библиотека Web Components в духе shadcn. Серьёзно, я проверял

Согласен, что плодить новые сущности в виде кастомных компонентов надо тогда, когда можно существенно упростить разметку. Джаваскриптовое поведение можно и через is аккуратно подключить, оставляя понятные всем теги.