Fix visible components (#112)

* Fix visible components

The wrapper component is grabbed with querySelector, so no need for `.item()` call which was throwing.

* Add back in display contents
This commit is contained in:
Matthew Phillips 2021-04-19 15:14:53 -04:00 committed by GitHub
parent 46a6ba6093
commit ea857e675d
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23

View file

@ -31,7 +31,7 @@ export function createRenderer(renderer: SupportedComponentRenderer) {
} catch (e) {
value = '';
}
value = `<div data-astro-id="${innerContext['data-astro-id']}">${value}</div>`;
value = `<div data-astro-id="${innerContext['data-astro-id']}" style="dislplay: contents">${value}</div>`;
const script = `
${typeof wrapperStart === 'function' ? wrapperStart(innerContext) : wrapperStart}
@ -55,7 +55,7 @@ export function createRenderer(renderer: SupportedComponentRenderer) {
idle: createDynamicRender('requestIdleCallback(async () => {', '})'),
visible: createDynamicRender(
'const o = new IntersectionObserver(async ([entry]) => { if (!entry.isIntersecting) { return; } o.disconnect();',
({ root }) => `}); Array.from(${root}.item(0).children).forEach(child => o.observe(child))`
({ root }) => `}); Array.from(${root}.children).forEach(child => o.observe(child))`
),
};
}