Knowledge base v2.13.0 · Community edition · data through 2 October 2026
Topic · Rendering and JavaScript
Web Fragments came from a community lightning talk by Natalia Venditto (Adobe), not from Google: a library for embedding apps, including AI-generated ones, in a host page without global JavaScript collisions, CSS bleed or fate sharing, where an error in the embedded app breaks the host. Her comparison slide said an iframe isolates scripts and styles but is walled off from the page's DOM, navigation and layout, shadow DOM isolates styles but shares JavaScript globals, and a rewrite means isolating by hand; Web Fragments meets all three criteria but needs browser patches today. It runs the embedded app's JavaScript in a hidden iframe, places its DOM in a shadow root of the host page, loads assets through a gateway from a standalone endpoint and virtualizes APIs such as document, history and location; the team backs the ShadowRealm standard proposal, which she said was at stage 2.7 at the time of the talk. None of this is in Google's documentation, which says Google flattens shadow DOM when rendering and generally, but not always, indexes iframe content as part of the embedding page. Author’s view: content in a fragment's shadow root can be indexed with the host page only if it shows in the rendered HTML, so test such pages in URL Inspection and keep the fragment's asset URLs crawlable. A second recording of Day 2 made her deployment advice clear: she recommended server-rendering web fragments, said a server-rendered app reframed into the host page is fully indexable, and reported an enormous performance increase (no figure given) when an app is reframed inside a fully client-side host, because it is rendered and interactive immediately (all said at the event).
Things in this topic 6
Counts are claims that name the thing. All things
What to do
A slide titled Orchestration approaches compared four ways to combine micro-frontends in one page (iframe, Shadow DOM, rewriting everything, and reframing with Web Fragments) on three criteria (JavaScript isolated, styles isolated, part of the page) and named the catch of each.
Speaker Natalia VendittoIn Day 2, 10:40 · Lightning session D: Rendering and JavaScriptEvidence slide photo, transcript
An iframe, the long-established way to embed an app, isolates both JavaScript and styles but is not part of the page: it is walled off from the host's DOM, navigation and layout, which Natalia Venditto said brings many problems with accessibility, layout and navigation.
“Walled off from DOM, navigation, layout”
Wording checked against the slide or recording
Speaker Natalia VendittoIn Day 2, 10:40 · Lightning session D: Rendering and JavaScriptEvidence slide photo, transcript
Shadow DOM isolates styles and keeps the embedded content part of the page, but it does not isolate JavaScript: the embedded code still shares the host's JavaScript globals.
“Still shares JS globals”
Wording checked against the slide or recording
Speaker Natalia VendittoIn Day 2, 10:40 · Lightning session D: Rendering and JavaScriptEvidence slide photo, transcript
Used byglossary term Shadow DOM
Rewriting everything into one application keeps the result part of the page, but JavaScript and style isolation then have to be done by hand.
Speaker Natalia VendittoIn Day 2, 10:40 · Lightning session D: Rendering and JavaScriptEvidence slide photo, transcript
The catch the comparison slide gave for rewriting everything was that you cannot rewrite code you did not write; Natalia Venditto explained that AI cannot rewrite code already in place because it does not know its requirements, design system or other constraints.
“Can't rewrite code you didn't write”
Wording checked against the slide or recording
Speaker Natalia VendittoIn Day 2, 10:40 · Lightning session D: Rendering and JavaScriptEvidence slide photo, transcript
Reframing with Web Fragments was the only approach on the comparison slide ticked for all three criteria (JavaScript isolated, styles isolated, part of the page); its stated catch is that it relies on browser patches today.
“Needs patches today”
Wording checked against the slide or recording
Speaker Natalia VendittoIn Day 2, 10:40 · Lightning session D: Rendering and JavaScriptEvidence slide photo, transcript
A slide set out Web Fragments in five steps: an LLM writes the app and adds a custom element such as <web-fragment fragment-id="some-id"> to the HTML, a standalone HTTP endpoint is set up, the library is imported and initialized with initializeWebFragments(), the fragment is registered in the gateway, and step 5 is a celebration emoji.
Speaker Natalia VendittoIn Day 2, 10:40 · Lightning session D: Rendering and JavaScriptEvidence slide photo, transcript
A web fragment is served from its own standalone HTTP endpoint, so the embedded app can be deployed anywhere, separately from the host page.
Speaker Natalia VendittoIn Day 2, 10:40 · Lightning session D: Rendering and JavaScriptEvidence slide photo, transcript
After Google's opener, Lightning session D had three community talks: rendering and JavaScript execution blind spots (Sören Bendig), debugging JavaScript rendering for Search (Rebecca Yu) and virtualizing the browser (Natalia Venditto).
Speaker Erin SparlingIn Day 2, 10:40 · Lightning session D: Rendering and JavaScriptEvidence transcript
Natalia Venditto, a Principal Software Engineer at Adobe, gave a seven-minute community lightning talk on JavaScript and web standards, built around the Web Fragments library.
Speaker Natalia VendittoIn Day 2, 10:40 · Lightning session D: Rendering and JavaScriptEvidence transcript
Natalia Venditto said teams are increasingly asked to integrate AI-generated content and applications into existing web applications and want to do so without breaking the host application, a situation she called a typical micro-frontend scenario.
Speaker Natalia VendittoIn Day 2, 10:40 · Lightning session D: Rendering and JavaScriptEvidence transcript
Natalia Venditto named three typical failure modes by which an embedded app can break the application hosting it: collisions in the global JavaScript scope and module registry, CSS bleed, and fate sharing.
Speaker Natalia VendittoIn Day 2, 10:40 · Lightning session D: Rendering and JavaScriptEvidence transcript
CSS bleed, as Natalia Venditto described it, means styles leak between an embedded app and its host, so that suddenly everything looks like the embedded app or the embedded app takes on the look of the host.
Speaker Natalia VendittoIn Day 2, 10:40 · Lightning session D: Rendering and JavaScriptEvidence transcript
Fate sharing means a failure in an embedded app spreads to its host, for example an unhandled exception in the embedded app that ends up breaking the host application.
Speaker Natalia VendittoIn Day 2, 10:40 · Lightning session D: Rendering and JavaScriptEvidence transcript
Web Fragments is a lightweight library that puts a hidden iframe in the host page and uses it as an isolated sandbox to run the embedded app's JavaScript, not to render the app.
Speaker Natalia VendittoIn Day 2, 10:40 · Lightning session D: Rendering and JavaScriptEvidence transcript
Web Fragments fetches the embedded app's assets from a remote endpoint through middleware that acts as a gateway.
Speaker Natalia VendittoIn Day 2, 10:40 · Lightning session D: Rendering and JavaScriptEvidence transcript
Web Fragments reframes the embedded app's DOM by placing it inside a shadow DOM in the host page, while the app's JavaScript runs in the hidden iframe.
Speaker Natalia VendittoIn Day 2, 10:40 · Lightning session D: Rendering and JavaScriptEvidence transcript
With Web Fragments the page ends up as a single document in which the host application does not know the embedded app runs inside it and the embedded app does not know it lives in another document.
Speaker Natalia VendittoIn Day 2, 10:40 · Lightning session D: Rendering and JavaScriptEvidence transcript
Web Fragments monkey-patches browser APIs to containerize the browser, recreating inside it an architecture similar to Docker containers on the back end.
“we monkey patch the browser to containerize it”
Speaker Natalia VendittoIn Day 2, 10:40 · Lightning session D: Rendering and JavaScriptEvidence transcript
The browser APIs Web Fragments patches include document, history and location; Natalia Venditto said they are virtualized rather than hijacked, so controls work exactly as in a normal application.
Speaker Natalia VendittoIn Day 2, 10:40 · Lightning session D: Rendering and JavaScriptEvidence transcript
Web Fragments retargets dispatchEvent calls to the fragment's shadow root and resolves DOM calls such as appendChild and element lookups against the main document.
Speaker Natalia VendittoIn Day 2, 10:40 · Lightning session D: Rendering and JavaScriptEvidence transcript
Natalia Venditto said Web Fragments suits AI-generated apps because a web fragment used as a custom element sandboxes the app's rendering, avoiding collisions and CSS bleed between the app and its host in either direction.
Speaker Natalia VendittoIn Day 2, 10:40 · Lightning session D: Rendering and JavaScriptEvidence transcript
Natalia Venditto said the five Web Fragments steps are all that is needed to run a containerized application fully on the client side.
Speaker Natalia VendittoIn Day 2, 10:40 · Lightning session D: Rendering and JavaScriptEvidence transcript
Natalia Venditto said Web Fragments is framework-agnostic and vendor-agnostic and works the same whatever JavaScript framework the embedded app uses.
Speaker Natalia VendittoIn Day 2, 10:40 · Lightning session D: Rendering and JavaScriptEvidence transcript
Natalia Venditto recommended that web fragments be server-rendered.
Speaker Natalia VendittoIn Day 2, 10:40 · Lightning session D: Rendering and JavaScriptEvidence transcript
Used byrequirement DEV-REN-01
Natalia Venditto reported an enormous performance increase (no figure given) when an application is reframed inside a fully client-side host, because the reframed app is rendered and interactive immediately.
Speaker Natalia VendittoIn Day 2, 10:40 · Lightning session D: Rendering and JavaScriptEvidence transcript
Natalia Venditto said a server-rendered app reframed into the host page is fully indexable.
Speaker Natalia VendittoIn Day 2, 10:40 · Lightning session D: Rendering and JavaScriptEvidence transcript
Used byrequirement DEV-REN-01
Natalia Venditto said the goal of the Web Fragments team is not to maintain monkey patches but to standardize the approach.
Speaker Natalia VendittoIn Day 2, 10:40 · Lightning session D: Rendering and JavaScriptEvidence transcript, slide photo
Natalia Venditto said the case for standardizing Web Fragments is that it already relies on many existing browser APIs, built that way so as not to rewrite much or reinvent the wheel.
Speaker Natalia VendittoIn Day 2, 10:40 · Lightning session D: Rendering and JavaScriptEvidence transcript
Natalia Venditto said ShadowRealm, a JavaScript standard proposal, was at stage 2.7 at the time of the talk, which she glossed as meaning that only implementation is missing.
“the only thing missing is implementation”
Speaker Natalia VendittoIn Day 2, 10:40 · Lightning session D: Rendering and JavaScriptEvidence transcript
Natalia Venditto said the ShadowRealm proposal would do much of what Web Fragments does today with patches: containerizing and isolating execution.
Speaker Natalia VendittoIn Day 2, 10:40 · Lightning session D: Rendering and JavaScriptEvidence transcript
Natalia Venditto said the Web Fragments team supports the ShadowRealm standard proposal.
Speaker Natalia VendittoIn Day 2, 10:40 · Lightning session D: Rendering and JavaScriptEvidence transcript
Polyfills work in two directions: they patch backwards where a browser lacks support, or patch forward to build now for a feature expected in the future, as Web Fragments does.
Speaker Erin SparlingIn Day 2, 11:15 · What is Google friendly JavaScriptEvidence transcript
Google says its systems generally try to index the content of a page embedded with an iframe as part of the page that embeds it, but this is not guaranteed because both pages are also normal HTML pages on their own.
Publisher Google Search Central (SEO office hours transcript, December 2023), Search Central blog (21 January 2022)Annotates Day 2, 10:40 · Lightning session D: Rendering and JavaScript
Used byrequirement DEV-REN-10
Google's documentation says Google supports web components and flattens shadow DOM and light DOM content when it renders a page, and that content not visible in the rendered HTML cannot be indexed.
Publisher Google Search CentralAnnotates Day 2, 10:40 · Lightning session D: Rendering and JavaScript
Used byrequirement DEV-REN-10glossary term Shadow DOM
Pages that embed third-party or AI-generated apps can share their fate, since an unhandled exception in the embedded code can break the host page; check the rendered HTML and JavaScript console output of such pages in Google's testing tools to make sure the host's own content still renders.
Author Ibrahim AnjroAnnotates Day 2, 10:40 · Lightning session D: Rendering and JavaScript
Used byrequirement DEV-REN-09
Before embedding an app or widget in an iframe, test it with a keyboard and a screen reader as well as for layout and navigation, because the isolation an iframe gives comes at those costs.
Author Ibrahim AnjroAnnotates Day 2, 10:40 · Lightning session D: Rendering and JavaScript
Because Web Fragments monkey-patches core browser APIs such as document, history and location, test pages that use it in Google's rendering (the rendered HTML in Search Console's URL Inspection tool or the Rich Results Test), not only in a normal desktop browser.
Author Ibrahim AnjroAnnotates Day 2, 10:40 · Lightning session D: Rendering and JavaScript
Used byrequirement DEV-REN-10
Make sure robots.txt does not block the URLs from which the browser loads a fragment's assets (the gateway paths on the host page's origin, or the endpoint's own host if assets load from there), because Google does not render JavaScript from blocked files and robots.txt rules apply per host.
Author Ibrahim AnjroAnnotates Day 2, 10:40 · Lightning session D: Rendering and JavaScript
Because Google flattens shadow DOM when it renders, content that Web Fragments places in a shadow root can in principle be indexed with the host page, but only if it appears in the rendered HTML; check that in URL Inspection rather than relying on a library's promise of indexability.
Author Ibrahim AnjroAnnotates Day 2, 10:40 · Lightning session D: Rendering and JavaScript
Used byrequirement DEV-REN-10
Polyfills work in two directions: they patch backwards where a browser lacks support, or patch forward to build now for a feature expected in the future, as Web Fragments does.
Natalia Venditto said the ShadowRealm proposal would do much of what Web Fragments does today with patches: containerizing and isolating execution.
Keep indexable content out of iframes, and check web components in the rendered HTML
Rests on 4 claims, 4 of them in this topic
Server-render the main content and everything indexing depends on (SSR, static generation or hybrid)
Rests on 11 claims, 2 of them in this topic
Monitor JavaScript console errors and Content Security Policy violations on key templates
Rests on 4 claims, 1 of them in this topic