 one. I was actually inspired to do this talk yesterday when I went to Singapore CSS. And I listened to a talk by Mr Sheldon here where he talked about a specific, talked about a problem he was having at work. So what inspired me particularly was that often in these talks we like to discuss a lot of ideal scenarios or new stuff. And sometimes we forget that there's real life with real problems, which are sometimes not as exciting as the things you want to talk about. But I was inspired to talk about a particular problem that I had and the solution that we came to. So I'm not saying that, so there's a problem, right? So I'm not saying that this is how you should do things if you have a choice. But this is what we were doing in the context of the problem. Okay, so what's the problem? The problem is we were developing a react application and it was built, it was started using create react app, right? So that's all fine. The problem is that it had to be served as part of another website. So this is still setting the scene here. It was decided that there would be an iframe placed in that website and we would serve the react application within that iframe. So this was like kind of okay. Until a particular point where it became not okay. And this point was when we had a modal in the react application and I'll demonstrate later why things became not okay. Actually, let me demonstrate it now. So I haven't prepared that well for this, but this is the page with the iframe. So the iframe is here and within this iframe we're serving a react application which has a modal. So when you open the modal, there's a problem. Everything is trapped within the iframe. All right, so this is obviously not how a modal is supposed to work. It's actually supposed to cover the entire screen. So what we did basically for this was we made use of a react feature called portals. It's actually part of reactdom. So what is a portal? What react is is basically a tree, right? For some of us it's like the tree of life, but it's basically a tree. And what this tree is is your components, right? So you usually start off with like app and then there's like, I don't know, header, whatever, the rest of it. But the thing is react is actually not a tree. So I sound like I've just contradicted myself, but react is actually two trees. So the first tree is the one I just described, which is the tree of UI elements. But there's actually a more like, I don't know, phantom like tree, which is the tree of data. So as you, as everyone knows in react data is, data flow is unidirectional. So top down and unidirectional. So when we have a, when you have a react application, in addition to just the UI components forming a tree, the relationship of the data between these components also forms like another tree on top of it. And for the most part, this is fine because when you have a component that's a child of another component, then you typically want that component to be able to get access to the data that is either created by its parent or passed on. But sometimes this is not what we want. Sometimes we want to separate these trees. And what Apostles let us do is, is keep the data tree, but move the UI tree. So this is basically what, how we solve this issue. Now I'm not going to do any live coding, but I'm going to do live git. Yeah. And I didn't have time to figure out how to do this properly, but I have to build it because otherwise I get some like cross origin problem in the iframe. So this is what we did. And now when we open the model, let's see. Yes. Okay. So what we were able to do was to render the content of the model outside the iframe. So what that looks like is here. Okay. This is like just, it's almost like pseudocode. But basically what we're doing is inside the model component, we target outside the, we target outside the iframe and we mount it there. So if you look, this, this model in the like data tree is a sibling of the button. But if you look at the UI tree, it's actually a sibling of the iframe. But the, but the data flow is still like, as it appears in the code, right? So if you, if you close everything still hooks up together. There's a problem though, right? Obviously. It doesn't look like a model. It's missing all the styles. And that's because the styles are like still trapped in the iframe. So, so how did we solve this? I'd like to say that like we came out with like this really great solution. But actually we just happened to find the solution already there. So we were using style components in the react application. And this is how I found out about this feature. There's actually a feature of style components, which lets you solve this. So let's see if it works this time. Yeah. Okay. So, so it works now, right? And what is the feature of style components? It's actually this thing called style sheet manager, which lets you pass a target where you want the generated styles to be attached. So all the styles inside here, where all the styles inside style sheet manager will be attached here instead of inside the iframe. So, if you look, they are like here. So that's how we managed to like take out the UI and also the styles. Yeah, that's it. Thanks. So the question. Yeah. So if we remove the iframe now, so how the behavior will be because you're attaching to the window problem? Yeah. So it's dependent on the outside structure. So if you pass a reference to a node that doesn't exist to the target, then you'll have some problems. So the way we did it was we had like we did it via configuration where we had like a finite set of environments. So we had like the one with the iframe and then for local development, we had it without. So in one configuration, you pass like a default reference there. And then for a different one, you choose the correct element. Yeah. Any other questions? So yes, but partly by chance because when style components generates the class names, it's it's it's like a hash. So I don't know what the so technically it's possible that you can break stuff. If you happen to have a if you happen to have a class on a component in the outside app, which has the same name as the generated one, but we didn't face that. So yeah. But yeah, technically it's it is sharing the same scope once it's out. Okay.