Stop Embedding Like It’s 1999: Why Web Components Win

Iframes have been around since the early days of the internet. For years, web developers relied on these simple HTML elements to embed all types of content in their web pages. But technology evolves rapidly, and today, the iframe is going out of fashion.

In this article, you’ll learn why it’s time to say goodbye to iframes and embrace new web technologies like web components. Learn how web components will blow new life into your embedded content, especially when embedding charts or analytical functionalities.

Why say goodbye to iframes?

In modern software development, using iframes is like using a flip phone instead of a smartphone. If you want to embed external content on a webpage, iframes do the job just fine, but they lack the speed, sleekness and user experience that more modern components offer:

• They can be slow to load
• They can pose security risks
• The embedded content can’t always be indexed properly by search engines
• There’s no communication between an iframe and other content on your webpage
• It’s inflexible, posing issues for styling and responsiveness

In 2026, there are way better alternatives than using an iframe to embed dashboards, charts or other web content. New technologies like AJAX or web components offer a more seamless and secure integration of embedded content.

What are web components?

Web components are a set of JavaScript APIs for developers to create reusable, custom elements that can be embedded in web pages and platforms. These widgets operate independently, so they don’t interfere with other parts of your code.

Web components are based on 4 main specifications:

• Custom Elements: APIs that let you define new HTML tags and extend existing ones to create reusable web components.
• Shadow DOMs: define the CSS styles and markup of your web components.
• HTML Templates: define fragments of markup that are unused at page load, but can be instantiated later.
• ES Modules: a standardized system for JavaScript to import and export modules. 

Web components are essential building blocks in a composable architecture. They help you break up a complex SaaS product or web app into smaller, manageable pieces of code that you can develop and maintain independently.

Although these components can exist independently, they can still interact with each other. Embedding dashboards or charts as web components makes them truly feel part of your app. Unlike iframes, web components can easily communicate with other parts of your application, like filter elements, dropdowns and other components.

Iframes vs web components: pros and cons

Is the iframe dead? Or are they still worth using in some use cases? Let’s look at a quick comparison of using a web component vs an iframe, uncovering the benefits and disadvantages.

Iframe

Although iframes are considered outdated, they are still a good solution if you want:

• Isolated environment: styles and scripts in the iframe can’t affect the parent page.
• Extra security: sandboxing protects sensitive parent app data.
• Easy implementation: just drop in a simple HTML <iframe> snippet for videos, maps, forms, or dashboards.
  
  

On the flip side, forget about iframes if you want to avoid the following limitations:

• No interactivity: iframes can’t communicate with the parent app or other embeds.
• Accessibility issues: tricky for keyboard navigation and screen readers.
• Performance hit: slow to load, especially with multiple iframes or on mobile.

Web components

While iframes are rigid, web components are designed for flexibility:

• Highly flexible: works with any JS framework (Angular, React, Vue, or vanilla JS).
• Encapsulation: no style or script leakage into the rest of the app.
• Customizable: create custom HTML tags and attributes to your liking
• Low-maintenance & reusable: Pick from a set of UI components you’ve built, and reuse them across projects.
• Interactive: can easily communicate with the parent app and other components.
  
  

On the downside, there will be a learning curve to start using web components:

• Learning curve: requires some JavaScript API knowledge.
• Complex projects may need workarounds for integration.
• Debugging quirks: occasional issues with older browsers (Edge, Firefox).

The table below summarizes the pros and cons to help you figure out what’s best for your use case.

Why web components are the new standard for embedded analytics

Web components offer a faster, smarter, and more interactive way to embed analytics into any software product. They’re built for flexibility, making charts, dashboards, and other data experiences feel like a native part of your app, instead of being bolted on.

Platforms like Luzmo build on this approach with tools designed specifically for modern embedded analytics. With Luzmo Studio, teams can design and customize embedded dashboards and charts that integrate seamlessly with their product UI. Luzmo IQ allows users to explore data through AI-powered insights and natural language queries, while Luzmo AI enables intelligent data exploration directly inside applications. Together, these capabilities make it easier to move beyond static embeds and build truly interactive, composable analytics experiences.

Here are three powerful ways to start using web components right now to level up your embedded analytics.

Single embedded charts for faster performance

Sometimes, you don’t want to embed an entire dashboard on a web page. You just want to blend charts with other content. For example, imagine you’re launching your company’s annual report. To support claims in the report, you want to add interactive charts and graphs alongside the text.

With iframes, adding multiple charts will drag down load times and limit your display options.

Web components keep things fast and flexible, letting you place each chart exactly where and how you want it.

‍

Interaction between charts and parent app

The biggest advantage of web components is their interactivity. Take the annual report example: two charts embedded as separate web components can easily interact.

For instance, one chart can dynamically filter the other. They can also connect to external filters in your app. So, if your annual report page has a dropdown to switch years, selecting 2022 will instantly update all embedded charts to show 2022 data.

Another cool example is this collapsible filter panel. Users can apply filters that instantly update every embedded chart on the page. When it’s collapsed, the filters stay applied in the background, keeping the page clean while still showing personalized data.

‍

‍

Build data products of the future with Luzmo Flex

Iframes are great for embedding whole dashboards with minimal developer effort. But let’s face it: who wants to sit and stare at an overwhelming dashboard full of charts that communicate… nothing? Users expect smart insights everywhere; consuming data without even thinking about it.

Embedding with web components is the first step towards a truly composable analytics experience. You can drop individual charts, tables, or filters straight into your app — mixing and matching different chart components in your own app.

And everything that comes next? Luzmo Flex will take it from there. This developer-friendly SDK is a complete toolkit for embedding analytics as flexible building blocks. Pick the components you want, place them anywhere in your app, and make them work together seamlessly. Replace bulky dashboards with analytics that feel native from the start.

Let these 9 examples inspire you what you can build with the power of Luzmo Flex and web components.

Get started today with Luzmo’s web components

At Luzmo, we set the standard for modern embedding. Our web components work seamlessly in any major frontend framework, giving you all the flexibility and interactivity you need.

With Luzmo’s embedded analytics platform, product managers go from idea to fully integrated analytics in days, not months. See it in action with a free 10-day trial or book a demo with our experts.