feat(core): Add support to shadow DOM for QwikLoader. #6547
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
✅ Deploy Preview for qwik-insights ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
|
commit: @builder.io/qwik
@builder.io/qwik-city
eslint-plugin-qwik
create-qwik
|
Deploying qwik-docs with
|
| Latest commit: |
b2fc362
|
| Status: | 🚫 Build failed. |
|
So turns out that you can't use I think a better way to do it is for the QwikLoader to query |
Shadow DOM can be used to isolate an application. The isolation also
includes:
- Events don't bubble across shadow boundaries.
- QuerySelector doesn't cross shadow boundaries.
QwikLoader relies on both event bubbling and querySelector to process
events such as `on:click` and dispatch such as `on-window:resize`.
To enable QwikLoader to work with shadow DOM, it is necessary to tell
qwikloader that when it is registering an event listener, as well as
performing querySelector, it should do so not just on document but also
inside the shadow DOM. To do that it is the responsibility of the
developer to tell qwikloader about the shadow DOM roots.
CONSTRAINTS:
The qwikloader applications `q:container` must be fully inside the
shadow root. (i.e. the application itself must not cross the shadow DOM
boundaries.)
Developer responsibility: (choose one)
- Have qwik loader find the roots by annotate the elements which have
shadow DOM with `q:shadowRoot` attribute.
- Manually insert a `<script>` tag into HTML which will add the shadow DOM
root into the qwikloader's `qwikevents` array.
Example:
Possible implementation
```html
<div id="my-child" q:shadowRoot>
<template shadowrootmode="open">
<div q:container="..." q:base="..."...>qwik-container here</div>
</template>
</div>
```
Fixes: #6546
genki
pushed a commit
to genki/qwik
that referenced
this pull request
Jun 28, 2024
Shadow DOM can be used to isolate an application. The isolation also
includes:
- Events don't bubble across shadow boundaries.
- QuerySelector doesn't cross shadow boundaries.
QwikLoader relies on both event bubbling and querySelector to process
events such as `on:click` and dispatch such as `on-window:resize`.
To enable QwikLoader to work with shadow DOM, it is necessary to tell
qwikloader that when it is registering an event listener, as well as
performing querySelector, it should do so not just on document but also
inside the shadow DOM. To do that it is the responsibility of the
developer to tell qwikloader about the shadow DOM roots.
CONSTRAINTS:
The qwikloader applications `q:container` must be fully inside the
shadow root. (i.e. the application itself must not cross the shadow DOM
boundaries.)
Developer responsibility: (choose one)
- Have qwik loader find the roots by annotate the elements which have
shadow DOM with `q:shadowRoot` attribute.
- Manually insert a `<script>` tag into HTML which will add the shadow DOM
root into the qwikloader's `qwikevents` array.
Example:
Possible implementation
```html
<div id="my-child" q:shadowRoot>
<template shadowrootmode="open">
<div q:container="..." q:base="..."...>qwik-container here</div>
</template>
</div>
```
Fixes: QwikDev#6546
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
feat(core): Add support to shadow DOM for QwikLoader.
Shadow DOM can be used to isolate an application. The isolation also
includes:
QwikLoader relies on both event bubbling and querySelector to process
events such as
on:clickand dispatch such ason-window:resize.To enable QwikLoader to work with shadow DOM, it is necessary to tell
qwikloader that when it is registering an event listener, as well as
performing querySelector, it should do so not just on document but also
inside the shadow DOM. To do that it is the responsibility of the
developer to tell qwikloader about the shadow DOM roots.
CONSTRAINTS:
The qwikloader applications
q:containermust be fully inside theshadow root. (i.e. the application itself must not cross the shadow DOM
boundaries.)
Developer responsibility: (choose one)
shadow DOM with
q:shadowRootattribute.<script>tag into HTML which will add the shadow DOMroot into the qwikloader's
qwikeventsarray.Example:
Possible implementation
Fixes: #6546