![]() This means that the web component, even if it’s large, will not block the initial render. The defer keyword waits until a site is loaded and then runs the script. Unlike an iFrame, you can defer a script tag. Thinking about performance you import a web component using a script tag. A user would have no idea they’re interacting with a web component. That gives a really smooth transition in a website from the native website to a web component. What does that mean? Using text style as an example, if your style sheet does not specify a font it will use the font of the parent site. Also, depending on how you make the component, it can inherit certain attributes (like text style) from the parent site while maintaining its own styling that is more explicit. Since web components are literally just simple components like a button, an input field, or a whole form, they are small enough to be designed to look more homogenous with the site they’re used on. The first issue I brought up was the look at feel. Web components seem to solve all the problems that iFrames have. Web components are based around modern web standards and are a set of APIs that allow you to embed components into a website using an HTML tag. Unlike an iFrame, you can’t just make anything into a Web Component. While an iFrame is basically a window into another website a web component is literally a single component that can be used by the consumer. I can tell you they are worlds different. So at a high level, iFrames and web components seem pretty similar. You can even export web components as NPM packages if you so choose. Rather than using the Microsoft-created iFrame tag Web Components allow you to make your own custom tag. Web components are literally custom components you can use anywhere. If the site you’re embedding has a security issue then so does yours. Since your site is communicating with another site that opens up a security hole. This presents an issue like any open window would in your home. Literally, you could take any site and embed it as an iFrame with only the link to the site. This comes from the issue of not being able to defer an iFrame like you could a script tag. ![]() If the owner of the site you’re embedding does a bad job your site will also suffer as a result. ![]() Since you’re embedding another site the client still needs to load all that content. The second issue is the performance impact of an iFrame. Your iFrame also has to be of a fixed width and length and it can be difficult to properly position it on a site that makes it look more natural. It looks out of place as you could have two sites with very large style differences and if you use an iFrame in one to link to the other then it’s going to look weird. The first issue is that the iFrame will not look like it’s meant to be there. There are a number of issues that come along with that. It merely provides a window to view another website. The reason for that is that no one had really come up with something better! There was no real way to do what an iFrame does and make it completely cross-platform.Īt its core, an iFrame isn’t truly embedding anything in any website. Today we still see a boatload of sites using iFrames. It became the standard for embedding one site inside another for decades. The humble iFrame has been around since the late 90s and was first introduced by Microsoft. You’ve probably come across loads of different kinds of iFrames even if you weren’t fully aware of it. In short, an iFrame is an HTML document embedded inside another HTML document. In this article, I want to discuss these two technologies, how they differ, where they’re similar, and what the future may hold for them both. It could be said that this is the exact same kind of thing an iFrame would have been used for. In the last article, we created a contact form using Angular Elements and saw just how easy it is to integrate them into a website. Web components provide a standardized way to export components and functionality across web platforms. I’ve written about how to use web components with Angular Elements, but I think the discussion about web components goes a lot deeper than just how to use them.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |