From fd0fad361f0b795bf06c8c312235d44251dad884 Mon Sep 17 00:00:00 2001
From: Lea Verou <lea@verou.me>
Date: Mon, 10 Feb 2025 10:17:23 -0500
Subject: [PATCH] `<wa-isolate>` as a wrapper for DSD

---
 docs/_includes/svgs/theme-color.njk      |  6 ++--
 docs/_includes/svgs/theme-typography.njk |  6 ++--
 src/components/code-demo/code-demo.ts    | 20 +----------
 src/components/isolate/isolate.ts        | 46 ++++++++++++++++++++++++
 src/internal/recursive-qsa.ts            | 18 ++++++++++
 5 files changed, 71 insertions(+), 25 deletions(-)
 create mode 100644 src/components/isolate/isolate.ts
 create mode 100644 src/internal/recursive-qsa.ts

diff --git a/docs/_includes/svgs/theme-color.njk b/docs/_includes/svgs/theme-color.njk
index 0c41f7f5d..a4d245ef7 100644
--- a/docs/_includes/svgs/theme-color.njk
+++ b/docs/_includes/svgs/theme-color.njk
@@ -1,7 +1,7 @@
 {% set themeId = theme.fileSlug %}
 
-<div>
-  <template shadowrootmode="open">
+<wa-isolate>
+  <template>
     <link rel="stylesheet" href="/dist/styles/utilities.css">
     <link rel="stylesheet" href="/dist/styles/themes/{{ page.fileSlug or 'default' }}.css">
     <link rel="stylesheet" href="/dist/styles/themes/{{ themeId }}/color.css">
@@ -21,4 +21,4 @@
       {# <div class="wa-warning wa-outlined wa-filled"><wa-icon slot="icon" name="triangle-exclamation" variant="regular"></wa-icon></div> #}
     </div>
   </template>
-</div>
+</wa-isolate>
diff --git a/docs/_includes/svgs/theme-typography.njk b/docs/_includes/svgs/theme-typography.njk
index 06ba0212a..977bf0e52 100644
--- a/docs/_includes/svgs/theme-typography.njk
+++ b/docs/_includes/svgs/theme-typography.njk
@@ -1,7 +1,7 @@
 {% set themeId = theme.fileSlug %}
 
-<div>
-  <template shadowrootmode="open">
+<wa-isolate>
+  <template>
     <link rel="stylesheet" href="/dist/styles/native/content.css">
     <link rel="stylesheet" href="/dist/styles/native/blockquote.css">
     <link rel="stylesheet" href="/dist/styles/themes/{{ page.fileSlug or 'default' }}.css">
@@ -13,4 +13,4 @@
       <p>Body text</p>
     </div>
   </template>
-</div>
+</wa-isolate>
diff --git a/src/components/code-demo/code-demo.ts b/src/components/code-demo/code-demo.ts
index 05f8b4f04..87bb95c66 100644
--- a/src/components/code-demo/code-demo.ts
+++ b/src/components/code-demo/code-demo.ts
@@ -1,6 +1,7 @@
 import { html } from 'lit';
 import { customElement, property, query } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
+import recursiveQSA from '../../internal/recursive-qsa.js';
 import { HasSlotController, getInnerHTML } from '../../internal/slot.js';
 import WebAwesomeElement from '../../internal/webawesome-element.js';
 import '../icon/icon.js';
@@ -325,25 +326,6 @@ function absolutizeURLs(root: Element | DocumentFragment, base = location.href)
   }
 }
 
-/**
- * Get elements that match a selector within an element’s shadow tree
- * and any parent shadow trees, all the way up to the light DOM
- * @param selector
- * @param node - The node to start the search from
- */
-function recursiveQSA(selector: string, node: Node) {
-  const ret: Element[] = [];
-
-  for (let root = node; root.nodeType !== Node.DOCUMENT_NODE; ) {
-    root = root.getRootNode();
-    const elements = (root as ShadowRoot | Document).querySelectorAll(selector);
-
-    ret.push(...elements);
-  }
-
-  return ret;
-}
-
 function dedent(code: string) {
   // Remove blank lines at the start and end
   code = code.replace(/^\s*\n|\n\s*$/g, '');
diff --git a/src/components/isolate/isolate.ts b/src/components/isolate/isolate.ts
new file mode 100644
index 000000000..9ce555202
--- /dev/null
+++ b/src/components/isolate/isolate.ts
@@ -0,0 +1,46 @@
+import { customElement, property } from 'lit/decorators.js';
+import { unsafeHTML } from 'lit/directives/unsafe-html.js';
+import recursiveQSA from '../../internal/recursive-qsa.js';
+import WebAwesomeElement from '../../internal/webawesome-element.js';
+
+/**
+ * @summary Render a piece of code in shadow DOM. An alternative to DSD that plays nicely with DOM operations like cloning etc.
+ * @documentation https://backers.webawesome.com/docs/components/isolate
+ * @status experimental
+ * @since 3.0
+ *
+ */
+@customElement('wa-isolate')
+export default class WaIsolate extends WebAwesomeElement {
+  /** Includes resources and other elements from the surrounding page */
+  @property({ reflect: true }) include?: string;
+
+  render() {
+    return unsafeHTML(this.getShadowHTML());
+  }
+
+  // TODO memoize this and only update if:
+  // - this.include changes
+  // - elements have been added/removed that match the selector
+  // - Element contents have changed
+  private getShadowHTML(): string {
+    let html = '';
+
+    if (this.include) {
+      let includedElements = recursiveQSA(this.include, this);
+      html += includedElements.map(el => el.outerHTML).join('\n');
+    }
+
+    // Get template elements from the light DOM
+    const templates = Array.from(this.querySelectorAll(':scope > template'));
+    html += templates.map(template => template.innerHTML).join('\n');
+
+    return html;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'wa-isolate': WaIsolate;
+  }
+}
diff --git a/src/internal/recursive-qsa.ts b/src/internal/recursive-qsa.ts
new file mode 100644
index 000000000..8cd6e6549
--- /dev/null
+++ b/src/internal/recursive-qsa.ts
@@ -0,0 +1,18 @@
+/**
+ * Get elements that match a selector within an element’s shadow tree
+ * and any parent shadow trees, all the way up to the light DOM
+ * @param selector
+ * @param node - The node to start the search from
+ */
+export default function recursiveQSA(selector: string, node: Node) {
+  const ret: Element[] = [];
+
+  for (let root = node; root.nodeType !== Node.DOCUMENT_NODE; ) {
+    root = root.getRootNode();
+    const elements = (root as ShadowRoot | Document).querySelectorAll(selector);
+
+    ret.push(...elements);
+  }
+
+  return ret;
+}