Use Shadow DOM for the CreateGroupForm app

h/static/scripts/group-forms/components/CreateGroupForm.tsx

@@ -1,55 +1,29 @@
+import { Button, Input, Textarea } from '@hypothesis/frontend-shared';
+
 export default function CreateGroupForm() {
   return (
     <>
-      <h1 class="form-header">Create a new private group</h1>
+      <h1>Create a new private group</h1>
 
-      <form class="form group-form__form">
-        <div class="form-input">
-          <label for="name" class="form-input__label group-form__name-label">
-            Name <span class="form-input__required">*</span>
-          </label>
-          <input
-            type="text"
-            id="name"
-            class="form-input__input group-form__name-input has-label"
-            autofocus
-            autocomplete="off"
-            required
-          />
-          <span class="form-input__character-counter is-ready">0/25</span>
+      <form>
+        <div>
+          <label for="name">Name*</label>
+          <Input id="name" autofocus autocomplete="off" required />
+          0/25
         </div>
 
-        <div class="form-input">
-          <label
-            class="form-input__label group-form__description-label"
-            for="description"
-          >
-            Description
-          </label>
-          <textarea
-            id="description"
-            class="form-input__input group-form__description-input has-label"
-          ></textarea>
-          <span class="form-input__character-counter is-ready">0/250</span>
+        <div>
+          <label for="description">Description</label>
+          <Textarea id="description" />
+          0/250
         </div>
 
-        <div class="form-actions">
-          <div class="u-stretch"></div>
-
-          <div class="form-actions__buttons">
-            <button class="form-actions__btn btn primary-action-btn group-form__submit-btn">
-              Create group
-            </button>
-          </div>
+        <div>
+          <Button variant="primary">Create group</Button>
         </div>
       </form>
 
-      <footer class="form-footer">
-        <span class="form-footer__required">
-          <span class="form-footer__symbol">*</span>
-          <span class="form-footer__text">Required</span>
-        </span>
-      </footer>
+      <footer>*Required</footer>
     </>
   );
 }

h/static/scripts/group-forms/config.ts

@@ -0,0 +1,9 @@
+export type ConfigObject = {
+  /** The URLs of the app's CSS stylesheets. */
+  styles: string[];
+};
+
+/** Return the frontend config from the page's <script class="js-config">. */
+export default function readConfig(): ConfigObject {
+  return JSON.parse(document.querySelector('.js-config')!.textContent!);
+}

h/static/scripts/group-forms/index.tsx

@@ -1,9 +1,22 @@
 import { render } from 'preact';
 
 import CreateGroupForm from './components/CreateGroupForm';
+import readConfig from './config';
 
 function init() {
-  render(<CreateGroupForm />, document.querySelector('#create-group-form')!);
+  const shadowHost = document.querySelector('#create-group-form')!;
+  const shadowRoot = shadowHost.attachShadow({ mode: 'open' });
+  const config = readConfig();
+  const stylesheetLinks = config.styles.map(stylesheetURL => (
+    <link rel="stylesheet" href={stylesheetURL} />
+  ));
+  render(
+    <>
+      {stylesheetLinks}
+      <CreateGroupForm />
+    </>,
+    shadowRoot,
+  );
 }
 
 init();

h/templates/groups/create.html.jinja2

@@ -2,16 +2,13 @@
 
 {% set page_title = 'Create a new private group' %}
 
-{% block styles %}
-  {{ super() }}
-
-  {% for url in asset_urls('group_forms_css') %}
-    <link rel="stylesheet" href="{{ url }}">
-  {% endfor %}
-{% endblock %}
-
 {% block page_content %}
   <div id="create-group-form"></div>
+  <script type="application/json" class="js-config">
+    {
+      "styles": {{ asset_urls("group_forms_css")|tojson }}
+    }
+  </script>
 {% endblock %}
 
 {% block scripts %}