IntersectionObserver и slot?

Question

[Евгений]

Допустим, инициализируется 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, но всё же.

Comments

[Антон Шаманов]

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

[Евгений]

Антон Шаманов, да.

Answer 1

[Антон Шаманов]

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

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

Comments

[Евгений]

Ну вопрос был не в том, для чего они используются по спецификации. Я сразу сказал, что да, вместо них можно использовать любой другой элемент. Вопрос был в том, почему при инъекции их в 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)
})

// 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