Use Shadow DOM for the CreateGroupForm app
#8793
Merged
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
robertknight
approved these changes
Jul 4, 2024
There was a problem hiding this comment.
So that the surrounding page's JavaScript and CSS can't affect the Preact app, and
vice-versa.
Shadow DOM only affects DOM queries and styling. The JS environment is still the same one. This means that eg. monkey-patching JS somewhere in the page would affect both parts. That's not a concern here though since we only need style isolation.
So that the surrounding page's JavaScript and CSS can't affect the Preact app, and vice-versa.
Use components from our component library (specifically `<Input>`, `<Textarea>` and `<Button>`) in the `<CreateGroupForm>`. Instead of using the HTML from h's legacy forms. This legacy HTML doesn't work anymore anyway because the CSS it depends on is now isolated from the Preact app by shadow DOM.
Since the Preact app has now been moved into a shadow DOM the app's CSS was no longer working: the `<link>` elements for the app's stylesheets were outside of the shadow DOM where they don't affect the content inside the shadow DOM. The `<link>`'s to the app's stylesheets need to be moved into the shadow DOM. The problem is that the Preact app renders the contents of the shadow DOM, but the stylesheet URLs are only available to the Jinja templates and not available to the Preact app, but the Jinja templates only render the outer page not the contents of the shadow DOM. Get around this by having the Jinja templates pass the stylesheet URLs into the Preact app so that the Preact app can render the `<link>`'s in the shadow DOM: change the `create.html.jinja2` template to render the app's stylesheet URLs in a `"js-config"` object instead of actually rendering them as stylesheet `<link>`'s, then change the Preact app to read the stylesheet URLs from the `"js-config"` object and to render `<link>`'s for the stylesheet URLs into the shadow DOM. This `"js-config"` object can be used more in future when we need the Python code/Jinja templates to pass more configuration into the Preact app.
seanh
force-pushed
the
use-shadow-dom-for-preact
branch
from
70a053e
to
99ecf14
Compare
![github-advanced-security[bot]](https://avatars.githubusercontent.com/in/57789?s=60&v=4){kind=small}
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.
<Input>,<Textarea>and<Button>components in the new formjs-configobject, and the Preact app to read the CSS URLs from thisjs-configobject and render them into<style>'s within the shadow DOM.This results in a form that's largely unstyled, apart from the styling that frontend-shared applies to the
<input>,<textarea>and<button>. The form does also acquire amax-width, centered positioning,padding, etc because it's contained within the surrounding pages layout divs. The next PR's job will be to add Tailwind-style CSS to make the form once again look more like the legacy form, replacing the legacy styling that has been lost by the move into a shadow DOM.