Use ContextRoot at document.html instead

Author: agjohnson

public/index.html

@@ -23,9 +23,7 @@ <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-context>
-        <readthedocs-flyout></readthedocs-flyout>
-      </readthedocs-context>
+      <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>
@@ -62,13 +60,11 @@ <h2>Link Previews</h2>
       </div>
 
       <h2 id="notification">Notification</h2>
-      <readthedocs-context>
-        <readthedocs-notification class="raised toast"></readthedocs-notification>
-        <readthedocs-notification class="inverted"></readthedocs-notification>
-        <readthedocs-notification class="inverted raised"></readthedocs-notification>
-        <readthedocs-notification class="inverted" style="--readthedocs-notification-background-color: purple;"></readthedocs-notification>
-        <readthedocs-notification class="titled raised"></readthedocs-notification>
-        <readthedocs-notification class="titled inverted raised"></readthedocs-notification>
-      </readthedocs-context>
+      <readthedocs-notification class="raised toast"></readthedocs-notification>
+      <readthedocs-notification class="inverted"></readthedocs-notification>
+      <readthedocs-notification class="inverted raised"></readthedocs-notification>
+      <readthedocs-notification class="inverted" style="--readthedocs-notification-background-color: purple;"></readthedocs-notification>
+      <readthedocs-notification class="titled raised"></readthedocs-notification>
+      <readthedocs-notification class="titled inverted raised"></readthedocs-notification>
   </body>
 </html>

src/context.js

@@ -1,30 +1,26 @@
-import { html, nothing, render, LitElement } from "lit";
-import { ContextProvider } from "@lit/context";
-import { createContext } from "@lit/context";
-import { getReadTheDocsConfig } from "./readthedocs-config.js";
+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"));
 
-export class AddonsApp extends LitElement {
-  config = new ContextProvider(this, { context: configContext });
+/**
+ * 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();
 
-  connectedCallback() {
-    super.connectedCallback();
-    document.addEventListener(
-      EVENT_READTHEDOCS_ADDONS_DATA_READY,
-      this._handleAddonsDataReady,
-    );
-  }
-
-  createRenderRoot() {
-    return this;
-  }
-
-  _handleAddonsDataReady = (event) => {
-    console.log("_handleAddonsDataReady");
-    this.config.setValue(event.detail.data());
-  };
-}
-
-customElements.define("readthedocs-context", AddonsApp);
+document.addEventListener(EVENT_READTHEDOCS_ADDONS_DATA_READY, (event) => {
+  console.log("Event:", EVENT_READTHEDOCS_ADDONS_DATA_READY);
+  config.setValue(event.detail.data());
+});

src/flyout.js

@@ -44,8 +44,10 @@ export class FlyoutElement extends LitElement {
     this.floating = true;
     this.position = "bottom-right";
     this.readthedocsLogo = READTHEDOCS_LOGO;
-    console.log("Flyout _config (from constructor() method)");
-    console.log(this._config.value);
+    console.log(
+      "Flyout _config (from constructor() method)",
+      this._config.value,
+    );
   }
 
   _close() {
@@ -306,8 +308,7 @@ export class FlyoutElement extends LitElement {
 
   render() {
     // The element doesn't yet have our config, don't render it.
-    console.log("Flyout config (from render() method )");
-    console.log(this._config.value);
+    console.log("Flyout config (from render() method )", this._config.value);
 
     // Validate the context (`this._config.value`) on each update and return
     // nothing if it's invalid. ``nothing`` is a special Lit response type.