I wonder what would be the other uses of web components.
Practical case : at work we want to distribute a subsidies simulator. It's currently an iframe. What would be the advantages of distributing a web component instead of an iframe ?
Web components and iframes are not mutually exclusive. Web components off ease of use and page styles and events integration, iframes offer a much stronger encapsulation boundary. You can use a web component to host and load an iframe even.
A few advantages of web components if you don't need the security boundary of iframes:
- Web components can naturally resize to their content where iframes can't.
- Some page styles inherit, like `color`, `font-family` and all CSS custom properties, so they can look more integrated.
- Web components can fire events.
- Web components can have slots to project content from the use site into.
- Web components are much lighter weight than iframes.
That's true. I think I still like the limits of an iframe as a design constraint, compared to web components where you have to explicitly make those decisions. But really what tips me into iframe land is when using a backend for the HTML page can unlock something you can't do otherwise.
I think anything meant to be like a widget is a good fit. But an iframe you have the option of putting an app behind it while a web component is purely front end code. So maybe that’s a limitation for you. We at least plan to wrap iframes in web components for a nicer embed API.
Comments
Thanks for the link and the work.
I wonder what would be the other uses of web components.
Practical case : at work we want to distribute a subsidies simulator. It's currently an iframe. What would be the advantages of distributing a web component instead of an iframe ?
Web components and iframes are not mutually exclusive. Web components off ease of use and page styles and events integration, iframes offer a much stronger encapsulation boundary. You can use a web component to host and load an iframe even.
A few advantages of web components if you don't need the security boundary of iframes: - Web components can naturally resize to their content where iframes can't. - Some page styles inherit, like `color`, `font-family` and all CSS custom properties, so they can look more integrated. - Web components can fire events. - Web components can have slots to project content from the use site into. - Web components are much lighter weight than iframes.
Great points! We've talked about using iframes when we specifically don't want people to customize things, like single-video embeds.
You can set the CSS properties that you don't want to inherit, you shouldn't need an iframe.
That's true. I think I still like the limits of an iframe as a design constraint, compared to web components where you have to explicitly make those decisions. But really what tips me into iframe land is when using a backend for the HTML page can unlock something you can't do otherwise.
Good question. There’s a good post from Lea Verou worth reading. https://lea.verou.me/blog/2024/wcs-vs-frameworks/
I think anything meant to be like a widget is a good fit. But an iframe you have the option of putting an app behind it while a web component is purely front end code. So maybe that’s a limitation for you. We at least plan to wrap iframes in web components for a nicer embed API.