Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Use Shadow DOM for the CreateGroupForm app #8793

Merged
merged 3 commits into from
Jul 5, 2024
Merged

Use Shadow DOM for the CreateGroupForm app #8793

merged 3 commits into from
Jul 5, 2024

Commits on Jul 5, 2024

  1. Use Shadow DOM for the CreateGroupForm app 

    So that the surrounding page's JavaScript and CSS can't affect the
Preact app, and vice-versa.
    @seanh
    seanh committed Jul 5, 2024
    Configuration menu
    Copy the full SHA
    b2c8413 View commit details
    Browse the repository at this point in the history

  2. Use frontend-shared components in CreateGroupForm 

    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.
    @seanh
    seanh committed Jul 5, 2024
    Configuration menu
    Copy the full SHA
    c0327d8 View commit details
    Browse the repository at this point in the history

  3. Fix Preact app CSS in 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
    seanh committed Jul 5, 2024
    Configuration menu
    Copy the full SHA
    99ecf14 View commit details
    Browse the repository at this point in the history