QwikDev / qwik

Instant-loading web apps, without effort
https://qwik.dev
MIT License
20.64k stars 1.28k forks source link

Scope listeners and resources to qwik containers #1532

Open dario-piotrowicz opened 1 year ago

dario-piotrowicz commented 1 year ago
Qwik Version - 0.9.0
Operating System (or Browser) - macOS Monterey (Chrome v.105)

Which component is affected?

Qwik Runtime

Issue

Since Qwik can be used to implement single views/fragments inside pages (and that can be implemented by generating containers via the containerTagName option in the rendering functions) I think containers implemented using qwik should have their listeners and resources scoped to the container itself and that should not leak out of it (as it currently seems to happen).

This happens with the qwikLoader event listeners and I also saw that styles get moved to the document's head upon interaction, I am not sure, there may be other things that are getting applied on the outside of the container as well.


Another relevant aspect I noticed regarding this lack of scoping is that I cannot place qwik containers inside shadowDoms, since when I attempt that the events listeners get added to the global document and don't effect what's in the shadowDoms.


What ideally should happen is that qwik encapsulates as much as possible under the container's root its own logic without interacting with the global document. That should also allow containers inside shadowDoms to work correctly since from within shadowRoots the dom apis should be the same as the light dom ones.

Additional Information

wmertens commented 6 months ago

The styles do need to move somewhere though. Perhaps as a sibling to the container if the container isn't html or body?

As for the listeners, that can be done too. When the loader gets an event type pushed to it, it could attach the handler to only that container.

As for the Task eagerness settings load and idle, I believe they are currently not firing when a container is added after the document loads, so that needs fixing and per-container handling anyway.