RenderCache Now Saves What Web Components Render

Pages built from web components had a quiet problem with RenderCache. Chrome rendered them fine, but the saved copy came out nearly empty. Lit, Stencil and similar libraries draw a component’s content into a shadow root, which belongs to the element and isn’t part of the page’s HTML. Serialize the page and you get <product-card name="Blue Mug"></product-card>, with the name, the description and the price all missing.

Version 0.4.0 writes that content into the saved copy.

Components, with their slots filled in

For each open shadow root, RenderCache writes what the component rendered inside its tag. Where the component has a <slot>, the content you passed into the component goes there, or the slot’s fallback when you passed nothing. So a crawler reads the page the way a visitor sees it: the heading the component draws, then your “Ships in two days” in the spot the component gives it.

Styles that belong to a component stay out. In the page they would apply to everything, and a crawler reading text doesn’t need them. Closed shadow roots can’t be read from outside, so they stay empty, as before.

We tested this with a real Lit 3.3.3 page in Chrome on Linux, macOS and Windows. The saved copy has every line of text the page shows, and none of its scripts.

Frames from your own site

The same goes for iframes that show another page of your site. When such a frame loaded with status 200, its body is saved in place of the iframe, up to three frames deep, with links and image addresses rewritten so they still point to the right pages on your site. A frame from another site stays an iframe, and so does one that hadn’t loaded when the page was captured (a lazy frame below the fold), an error page, or a page framed inside itself.

What a review caught

An independent review went through the change twice before the release and found eight problems. Three of them would have shown up in saved copies. Lazy frames turned into empty boxes. A frame answering with an error page put that page, stack trace and all, into what crawlers get. And links inside frames were rewritten to the address RenderCache renders from, not your public site. All eight are fixed, each with a test that failed first.

Both behaviours are on by default. flatten_shadow_roots and flatten_frames turn them off, and rendercache render now reports how many shadow roots and frames went into each page. Archives are on the download page, and the reference lists the settings.