askyo
РусEng
Log in Create a survey
All articles

Shadow DOM survey widgets: the iframe is obsolete

An iframe weighs 200+ KB, breaks search indexing and adapts badly. A Shadow DOM widget is the modern way to embed. Here is the technical case.

The Askyo team · · #developers#embed#engineering

When you need to put a survey on your site, builders from the 2010s hand you <iframe src="...">. It works, but we are no longer in the 2010s. Here is why a Shadow DOM widget is objectively better, and why we took that route.

What is wrong with the iframe widget

Size. An iframe is a separate page with its own HTML, CSS and JS. The Typeform widget loads around 200 KB just to render a single question. Comparable widgets sit near 180 KB. That is all added on top of your site.

Indexing. Search engines and AI crawlers do not see iframe content in the context of your page. The survey is indexed separately, or not at all. For an NPS pop-up that hardly matters; for a lead-gen quiz it is lost traffic.

Styles and responsiveness. An iframe is a rectangle of fixed height. Adapting it to mobile is a dance of postMessage and ResizeObserver, and on small screens you end up with a scrollbar inside the frame.

Accessibility. Screen reader and keyboard users have to jump into the iframe, a break in context that nobody enjoys.

What the Shadow DOM gives you

The Shadow DOM is a W3C standard in which your widget renders inside the page DOM but with an isolated CSS scope. You get the best of both worlds:

  • The widget is part of the page, so it is indexed by Google and AI crawlers.
  • CSS is isolated: it does not break your design, and your CSS does not break the widget.
  • Size is just the JavaScript you need, with no duplicated HTML/CSS shell: 35 KB gzipped in Askyo’s case.
  • Responsiveness is native CSS on the inside. Container size equals widget size.
  • Accessibility: internal elements are exposed to screen readers as part of the page.

What it looks like in code

<script src="https://cdn.askyo.ru/widget.js" async></script>
<div data-askyo="nps-feedback-v3"></div>

Once loaded, the script finds <div data-askyo> and calls attachShadow on it in closed mode. An isolated React instance renders inside the shadow root. Your site never has to know React is in there. That is an implementation detail.

What to know before you roll it out

  • Browsers: the Shadow DOM is supported everywhere modern, including Safari 14+. IE 11 would need a polyfill, and IE 11 is gone.
  • CSS tokens: if you want the widget to inherit your site’s custom properties (--accent, --radius), it does that automatically.
  • Testing: Playwright and Cypress see the Shadow DOM out of the box via shadow_root.locator().

When you still want an iframe

Exactly one case: strict security policies that require full isolation of the widget from the page: banking, or medical forms with PII in the fields. Askyo supports that too, through an isolation: 'iframe' option. But the default is the Shadow DOM, and that default is right.

Next, the practical part

The widget documentation covers installation, the API, lifecycle events and examples for React, Vue and common CMSs.

Pricing Create a survey