Особенности работы слотов в WebComponents: что важно знать

Немного о disconnectedCallback и слоты в WebComponents

Работа со слотами в WebComponents часто вызывает вопросы даже у опытных разработчиков, потому что их поведение отличается от привычных паттернов в других UI-фреймворках. Давайте разберёмся, как это устроено на самом деле.

Как устроены слоты

В вебкомпонентах слот — это обычная DOM-нода внутри его Shadow DOM, например: <slot name="content"></slot>.

Чтобы передать содержимое в этот слот, мы используем атрибут slot на нужном элементе: <div slot="content"></div>.

Неочевидное поведение при условном рендеринге

Самое интересное начинается, когда слот исчезает из DOM, например, из-за условного рендеринга. Допустим, в какой-то момент компонент перестаёт рендерить <slot name="content"></slot>.

Что происходит с <div slot="content">?

• Нода <div slot="content"> не удаляется из DOM! Она продолжает существовать, со всеми своими состояниями, внутренними данными и даже вложенными вебкомпонентами.
• Визуально кажется, что <div> пропал. Это связано с тем, что без слота браузер не отображает содержимое, предназначенное для этого слота. Но на самом деле элемент просто «ждёт», когда слот снова появится.
• Жизненный цикл вложенных компонентов не прерывается. Если внутри <div slot="content"> есть другие вебкомпоненты, у них не будет вызван disconnectedCallback, потому что они физически не были удалены из DOM.

Почему это важно?

• Состояние сохраняется. Всё, что было внутри <div slot="content">, не теряется, даже если слот временно исчезает.
• Нет лишних перерисовок и сброса состояния. Это может быть критично для сложных форм, интерактивных виджетов и вложенных компонентов.
• Может привести к неожиданным багам. Например, если вы ожидаете, что при исчезновении слота дочерние компоненты «отключатся» и очистят ресурсы — этого не произойдёт.

Практический пример

<y-core-dropdown>
  <div slot="content"> // Это уже реальная нода которая никуда не исчезает
    <y-form></y-form>
  </div>
</y-core-dropdown>

Если внутри <y-core-dropdown> слот <slot name="content"></slot> исчезнет (например, при закрытии дропдауна), то <div slot="content"> и <y-form> останутся в DOM, их состояние не изменится, и disconnectedCallback у <y-form> не вызовется.

Выводы

Слоты в WebComponents — это не просто «точки вставки», а полноценные DOM-ноды, которые напрямую управляют отображением содержимого. Если слот исчезает, содержимое не удаляется, а просто перестаёт отображаться. Это важно учитывать при проектировании компонентов и управлении их жизненным циклом.