Move the Preact app for the new (feature-flagged) create-group-form page into a shadow DOM so the CSS of the surrounding site doesn't affect the Preact app and vice-versa.
Remove the legacy CSS classes from the Preact app's HTML since they no longer do anything. Also simplify the HTML a bit, no longer mimicking the HTML structure of the legacy page. We may end up adding back some of this structure or something similar as we style the page in future PRs.
Use frontend-shared's <Input>, <Textarea> and <Button> components in the new form
Move the Tailwind/frontend-shared CSS into the shadow DOM, so that it applies to the Preact app and not to the surrounding site. This requires the Jinja templates to render the CSS URLs into a js-config object, and the Preact app to read the CSS URLs from this js-config object 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 a max-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.
<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.