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

1 files changed, 2 insertions, 2 deletions

diff --git a/src/frontend/render/renderer.ts b/src/frontend/render/renderer.ts
index 00b4f5622..2c3d972ed 100644
--- a/src/frontend/render/renderer.ts
+++ b/src/frontend/render/renderer.ts
@@ -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))`
     ),
   };
 }