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

[zababurin]

connectedCallback() { this.shadowRoot.addEventListener('click', e => { const { target } = e const controlEl = target.closest('[data-control]') if (!controlEl) { return } const { control } = controlEl.dataset if (control === 'next') { this.#handleNext() } else if (control === 'prev') { this.#handlePrev() } else { console.error('Invalid control value') } }) }

А уничтожение где стоит ? по идее в disconectedCallback должно быть

[Dima-Andreev]

Хорошее замечание! В данном примере отписку (removeeventlistener) делать не нужно тк Garbage Collection сделает свое дело. При удалении элемента из DOM дерева все слушатели автоматически удаляются. Но! есть нюанс: если бы я делал подписку скажем на document или любой внешний элемент. То да отписка в данном случае была бы обязательна.

Еще ксати заметил данный компонент который создан с использрованием declarative shadow dom нет возможности создать динамически или склонировать тк shadow dom в данном случае привязывается при загрузке страницы. И тут возможно стоит рассмотреть вариант с attachShadow в дополнении к declarative (на случай клонирования или если браузер не поддерживает)

[zababurin]

    let eventListeners = [];

    const addEventListener = (element, event, handler) => {
        element.addEventListener(event, handler);
        eventListeners.push({ element, event, handler });
    };

    const removeAllEventListeners = () => {
        eventListeners.forEach(({ element, event, handler }) => {
            element.removeEventListener(event, handler);
        });
        eventListeners = [];
    };


   const compareBtn = shadow.querySelector('#compare-now');
        if (compareBtn) {
               addEventListener(compareBtn, 'click', async () => {
               console.log('Compare Now clicked');
               await context.compareNow();
               exportBtn.disabled = false
           });
        }


   removeAllEventListeners();

Я так обычно последнее время делаю. вроде работает

[zababurin]

 с использрованием declarative shadow dom нет возможности создать динамически или склонировать тк shadow dom в данном случае привязывается при загрузке страницы. 

Вы правы и как вы написали так и есть. Я исхожу из того просто, что

• Контент должен максимально быстро появляться, по этому откладывать появление теневого дерева нет. Чем раньше тем лучше

• В дальнейшем не должно быть проблем в рендером шаблона на стороне сервера. Декларативный подход позволяет на сервере формировать шаблон. Тогда на стороне клиента можно дата атрибутом отключить формирование темплейта, оставив только гидрацию шаблона. Здесь без declarative shadow dom не обойтись просто.

• Шаблон компонента рендерится полностью только один раз в идеале. Дальше либо части темплейта обновляются либо значения в полях. По этому динамические части так же остаются как и раньше, только они уже работают с темплейтом, а не выполняют какие то действия до того, как atache не сработал.