Ability to disable adoptStyles call #2412
Replies: 2 comments 2 replies
-
I would generally avoid adopting components into different windows. In the future other things in the DOM may not work correctly, and components themselves may make assumptions about the window or document they were created in. Loading the component definitions you need in the new window should be the safest thing. But if you want to disable adopted stylesheets globally, you can do this before any other scripts load: <head>
<script>
delete Document.prototype.adoptedStyleSheets;
delete CSSStyleSheet.prototype.replace;
</script> |
Beta Was this translation helpful? Give feedback.
-
Hi Justin, Let me give some more context. This is a realtime financial application with a complex ui and streaming data. Using the well established document.adoptNode allows for the state of the view to be transferred. Re initialising the components in the new window and recreate all of the state is not a solution, in fact it is not possible as some of that state are streams to specific server instances that can't be recreated and would impose either a certain backend architecture or complex frontend logic were the component does something different when loaded into a detached window to hook into the existing streams on the main window to achieve this. Yes thirdparty libs making assumptions about document and window is a problem, we write our own ui components to ensure we use the element.ownerDocument and its defaultView for window. In fact you could argue that the adoptStyles call is making assumptions about the document as it will always try to assign the cached constructed stylesheet without a check and with it "break" document.adoptNode. I'm currently navigating and debugging lit to understand more about this and just wanted to kick off a discussion. I'd be happy to have a call where I can show the app, as it is not public, for even more context. Kind Regards |
Beta Was this translation helpful? Give feedback.
-
Hi,
We have a web app that runs in Openfin/Electron and uses their api to open new windows. The new window has access to window.opener and with that all JS is running in the main window. We than append a lit component created in the main window to the body of the new window. The adoptStyles call throws an exception as constructed stylesheets can not be shared across documents. There seems to be no way of stopping lit calling adoptStyles even if no super is called in the createRenderRoot override.
We already have code to load the styles inline for this scenario as it was already necessary before using lit. If we could stop the adoptStyles call we could use static styles in the main window and get the performance advantage of constructed stylesheets while loading inline styles in the new windows.
It seems currently the only way to make this work is by having all styles rendered inline and not use the lit static styles, which will bloat the DOM in the main window unnecessarily.
Any ideas how to conditionally disable adoptStyles?
Thanks for any ideas/comments
Beta Was this translation helpful? Give feedback.
All reactions