IntersectionObserver и slot?

Допустим, инициализируется IntersectionObserver:

const observer = new IntersectionObserver((entries: IntersectionObserverEntry[]) => (     entries.forEach(({ target, isIntersecting }) => {         if(isIntersecting){                 // ...                 observer.unobserve(target)             }         }     }) ), {     root: document.querySelector('#root') })

Но при этом, при исполнении скрипта - все наблюдаемые элементы являются слотами:

document.querySelectorAll('slot[name]').forEach((slot: Element) => {     observer.observe(slot) })

Сами по себе слоты не имеют (почему?) такого свойства, как видимость в DOM, потому что по-умолчанию их свойство стиля, а именно display - равняется contents (либо они в принципе интерпритируются как заведомо не имеющие видимости в DOM).

Если свойство стиля слота display = contents (по умолчанию) - то эти слоты никогда не будут обработаны обсервером, потому что даже при наведении на них в DOM консоли разработчика - они не имеют никаких (computed) размеров вообще.

Если установить слоту свойство стиля display = initial (например), то он принимает размеры в соответствии с размером содержимого дочернего (дочерних) элемента (элементов), но даже в этом случае, когда этот слот не в пределах зоны видимости обсервера - он всё равно обрабатывается обсервером как видимый.

P.S. Да, я понимаю что можно вместо слотов использовать какой-то div, но всё же.

Дополнительно:

имеются ввиду эти слоты?

Ответы:

Сами по себе слоты не имеют (почему?) такого свойства, как видимость в DOM

ну как бэ потому что это слоты, в них просто подставляется контент.
Почитай https://developer.mozilla.org/en-US/docs/Web/API/W... для общего понимания

• Ну вопрос был не в том, для чего они используются по спецификации. Я сразу сказал, что да, вместо них можно использовать любой другой элемент. Вопрос был в том, почему при инъекции их в DOM - они не имеют изначально видимости, но когда ты устанавливаешь им свойство видимости (display) отличное от того, которое устанавливает им браузер (в моём случает chrome/canary) - они ВСЕ интерпритируются как видимые, даже когда они не попадают в обозначенную зону видимости обсервером.
• ты спрашиваешь что-то в духе "почему если колоть микроскопом орехи они раскалываются?"
• Антон Шаманов, я не буду отвечать на этот вопрос. Суть моего вопроса была в том, что почему один и тот-же элемент, валидный, вроде как, по спецификации - при дефолтном свойстве видимости не виден обсерверу, а при кастомном свойстве стиля - виден он и все ему подобные, которые даже не видны обсерверу.
• Антон Шаманов, если нужны сурсы для полного понимания, то:

  // client.tsx import { hydrate as hydrateElement } from 'preact' const observer = new IntersectionObserver((entries: IntersectionObserverEntry[]) => ( entries.forEach(({ target, isIntersecting }) => { if(isIntersecting){ console.log(isIntersecting) if(target.localName === 'slot'){ const slotName = target.getAttribute('name') if(slotName){ import(`/dist/islands/island.${ slotName }.js`).then((exports) => { const Island = slotName in exports ? exports[slotName] : null if(Island){ hydrateElement( <Island/>, target ) } }).catch(error => console.warn(error)) } observer.unobserve(target) } } }) ), { root: document.querySelector('#root') }) document.querySelectorAll('slot[name]').forEach((slot: Element) => { observer.observe(slot) })

  // client.tsx import { hydrate as hydrateElement } from 'preact' const observer = new IntersectionObserver((entries: IntersectionObserverEntry[]) => ( entries.forEach(({ target, isIntersecting }) => { if(isIntersecting){ console.log(isIntersecting) if(target.localName === 'slot'){ const slotName = target.getAttribute('name') if(slotName){ import(`/dist/islands/island.${ slotName }.js`).then((exports) => { const Island = slotName in exports ? exports[slotName] : null if(Island){ hydrateElement( <Island/>, target ) } }).catch(error => console.warn(error)) } observer.unobserve(target) } } }) ), { root: document.querySelector('#root') }) document.querySelectorAll('slot[name]').forEach((slot: Element) => { observer.observe(slot) })

  // Island.tsx export const Island = ({ name, children, ...props } : { name: string, children: any, props?: any }) => { const slotStyle = { display: 'initial' } return ( <slot name={ name } style={ slotStyle } { ...props }> { children } </slot> ) }

  // Island.tsx export const Island = ({ name, children, ...props } : { name: string, children: any, props?: any }) => { const slotStyle = { display: 'initial' } return ( <slot name={ name } style={ slotStyle } { ...props }> { children } </slot> ) }

• Евгений, там shadow dom