Use ContextRoot at document.html instead (#499)

Additional elements shouldn't be needed in our structure. This is how we
can use ContextRoot with `document.html` as the context root for
providers/consumers of the config context.

Author: agjohnson

public/index.html

@@ -22,6 +22,9 @@ <h1 id="documentation-addons">Documentation Addons</h1>
       <h2 id="docdiff">CustomEvent</h2>
       <p>Project slug using <em>CustomEvent</em>: <span id="custom-event-project-slug"></span></p>
 
+      <h2 id="flyout">Flyout</h2>
+      <readthedocs-flyout></readthedocs-flyout>
+
       <h2 id="docdiff">DocDiff</h2>
       <p>Visit <a href="docdiff.html">this page</a> to take a look at it.</p>
 

src/context.js

@@ -0,0 +1,26 @@
+import {
+  ContextProvider,
+  ContextRoot,
+  createContext,
+} from "@lit/context";
+import { EVENT_READTHEDOCS_ADDONS_DATA_READY } from "./events";
+
+export const contextRoot = new ContextRoot().attach(document.body);
+export const configContext = createContext(Symbol("readthedocs-config"));
+
+/**
+ * Because `config` provider is not attached to a ReactiveElement, and is
+ * instead connected to `document.html`, we have to call `hostConnected()`
+ * manually. See:
+ *
+ * https://github.com/lit/lit/blob/935697d47e62ed75e3157423400163a8371c62fc/packages/context/src/lib/controllers/context-provider.ts#L55-L58
+ **/
+const config = new ContextProvider(document.documentElement, {
+  context: configContext,
+});
+config.hostConnected();
+
+document.addEventListener(EVENT_READTHEDOCS_ADDONS_DATA_READY, (event) => {
+  console.log("Event:", EVENT_READTHEDOCS_ADDONS_DATA_READY);
+  config.setValue(event.detail.data());
+});