---
title: "Shadow DOM survey widgets: the iframe is obsolete"
description: "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."
url: https://askyo.ru/en/blog/website-widget
lang: en
last_modified: 2026-05-12
---

[All articles](https://askyo.ru/en/blog)

# 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 · May 12, 2026 · #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](https://askyo.ru/en/widget) covers installation, the API, lifecycle events and examples for React, Vue and common CMSs.

## Where this lives in the product

- [Widget for developers](https://askyo.ru/en/widget)
- [Survey on your website](https://askyo.ru/en/website-survey)

## Read next

- [Webhooks + CRM + chat: automating the follow-up A survey response should instantly become a lead, a task or an alert. Three working webhook scenarios you can set up without writing much code.](https://askyo.ru/en/blog/webhook-crm-telegram)
- [NPS without lying to yourself Net Promoter Score takes 30 seconds to calculate, and most companies still do it in ways that make the number meaningless. Formula, sampling and traps.](https://askyo.ru/en/blog/nps-without-lies)
- [Free form builders and data residency Google Forms is free and takes three minutes. Where the responses live, who processes them and under which contract is worth asking before the survey goes out.](https://askyo.ru/en/blog/free-form-builders-and-data-residency)

Share: [Telegram](https://t.me/share/url?url=https%3A%2F%2Faskyo.ru%2Fen%2Fblog%2Fwebsite-widget\&text=Shadow%20DOM%20survey%20widgets%3A%20the%20iframe%20is%20obsolete) [X](https://twitter.com/intent/tweet?url=https%3A%2F%2Faskyo.ru%2Fen%2Fblog%2Fwebsite-widget\&text=Shadow%20DOM%20survey%20widgets%3A%20the%20iframe%20is%20obsolete) [Email](mailto:?subject=Shadow%20DOM%20survey%20widgets%3A%20the%20iframe%20is%20obsolete\&body=https%3A%2F%2Faskyo.ru%2Fen%2Fblog%2Fwebsite-widget)