From b5c6a9355cf88e3ec92dd8c24e2361f2630410a7 Mon Sep 17 00:00:00 2001
From: Elliott Marquez <5981958+e111077@users.noreply.github.com>
Date: Wed, 1 Feb 2023 05:44:56 -0800
Subject: [PATCH] [Lit] Forwards compatiblity for streaming Declarative Shadow
 DOM (#6055)

* Forwards compatiblity for streaming DSD

* add shadowrootmode

* update tests

* add changeset
---
 .changeset/hip-pots-push.md                                 | 5 +++++
 packages/astro/test/custom-elements.test.js                 | 6 +++---
 .../fixtures/custom-elements/my-component-lib/server.js     | 2 +-
 packages/integrations/lit/client-shim.js                    | 2 +-
 packages/integrations/lit/client-shim.min.js                | 4 ++--
 packages/integrations/lit/server.js                         | 2 +-
 packages/integrations/lit/test/server.test.js               | 2 +-
 7 files changed, 14 insertions(+), 9 deletions(-)
 create mode 100644 .changeset/hip-pots-push.md

diff --git a/.changeset/hip-pots-push.md b/.changeset/hip-pots-push.md
new file mode 100644
index 000000000..b8707541c
--- /dev/null
+++ b/.changeset/hip-pots-push.md
@@ -0,0 +1,5 @@
+---
+'@astrojs/lit': patch
+---
+
+Add forwards compatibility for streaming Declarative Shadow DOM
diff --git a/packages/astro/test/custom-elements.test.js b/packages/astro/test/custom-elements.test.js
index b66c648a4..51e8ece34 100644
--- a/packages/astro/test/custom-elements.test.js
+++ b/packages/astro/test/custom-elements.test.js
@@ -23,7 +23,7 @@ describe('Custom Elements', () => {
 		expect($('my-element')).to.have.lengthOf(1);
 
 		// test 2: shadow rendered
-		expect($('my-element template[shadowroot=open]')).to.have.lengthOf(1);
+		expect($('my-element template[shadowroot=open][shadowrootmode=open]')).to.have.lengthOf(1);
 	});
 
 	it('Works with exported tagName', async () => {
@@ -34,7 +34,7 @@ describe('Custom Elements', () => {
 		expect($('my-element')).to.have.lengthOf(1);
 
 		// test 2: shadow rendered
-		expect($('my-element template[shadowroot=open]')).to.have.lengthOf(1);
+		expect($('my-element template[shadowroot=open][shadowrootmode=open]')).to.have.lengthOf(1);
 	});
 
 	it.skip('Hydration works with exported tagName', async () => {
@@ -46,7 +46,7 @@ describe('Custom Elements', () => {
 		expect($('my-element')).to.have.lengthOf(1);
 
 		// test 2: shadow rendered
-		expect($('my-element template[shadowroot=open]')).to.have.lengthOf(1);
+		expect($('my-element template[shadowroot=open][shadowrootmode=open]')).to.have.lengthOf(1);
 
 		// Hydration
 		// test 3: Component and polyfill scripts bundled separately
diff --git a/packages/astro/test/fixtures/custom-elements/my-component-lib/server.js b/packages/astro/test/fixtures/custom-elements/my-component-lib/server.js
index 7e36a26fd..688923159 100644
--- a/packages/astro/test/fixtures/custom-elements/my-component-lib/server.js
+++ b/packages/astro/test/fixtures/custom-elements/my-component-lib/server.js
@@ -18,7 +18,7 @@ function renderToStaticMarkup(component, props, innerHTML) {
   const Component = getConstructor(component);
   const el = new Component();
   el.connectedCallback();
-  const html = `<${el.localName}><template shadowroot="open">${el.shadowRoot.innerHTML}</template>${el.innerHTML}</${el.localName}>`
+  const html = `<${el.localName}><template shadowroot="open" shadowrootmode="open">${el.shadowRoot.innerHTML}</template>${el.innerHTML}</${el.localName}>`
   return {
     html
   };
diff --git a/packages/integrations/lit/client-shim.js b/packages/integrations/lit/client-shim.js
index ca97b92cc..c457710b7 100644
--- a/packages/integrations/lit/client-shim.js
+++ b/packages/integrations/lit/client-shim.js
@@ -8,7 +8,7 @@ async function polyfill() {
 }
 
 const polyfillCheckEl = new DOMParser()
-	.parseFromString(`<p><template shadowroot="open"></template></p>`, 'text/html', {
+	.parseFromString(`<p><template shadowroot="open" shadowrootmode="open"></template></p>`, 'text/html', {
 		includeShadowRoots: true,
 	})
 	.querySelector('p');
diff --git a/packages/integrations/lit/client-shim.min.js b/packages/integrations/lit/client-shim.min.js
index afae053ac..0965e6a78 100644
--- a/packages/integrations/lit/client-shim.min.js
+++ b/packages/integrations/lit/client-shim.min.js
@@ -8,7 +8,7 @@ var b = (t, n) => {
 function s() {
 	if (d === void 0) {
 		let t = document.createElement('div');
-		(t.innerHTML = '<div><template shadowroot="open"></template></div>'),
+		(t.innerHTML = '<div><template shadowroot="open" shadowrootmode="open"></template></div>'),
 			(d = !!t.firstElementChild.shadowRoot);
 	}
 	return d;
@@ -80,7 +80,7 @@ async function g() {
 	window.addEventListener('DOMContentLoaded', () => t(document.body), { once: true });
 }
 var x = new DOMParser()
-	.parseFromString('<p><template shadowroot="open"></template></p>', 'text/html', {
+	.parseFromString('<p><template shadowroot="open" shadowrootmode="open"></template></p>', 'text/html', {
 		includeShadowRoots: !0,
 	})
 	.querySelector('p');
diff --git a/packages/integrations/lit/server.js b/packages/integrations/lit/server.js
index 48a3c646f..da571466f 100644
--- a/packages/integrations/lit/server.js
+++ b/packages/integrations/lit/server.js
@@ -62,7 +62,7 @@ function* render(Component, attrs, slots) {
 	yield `>`;
 	const shadowContents = instance.renderShadow({});
 	if (shadowContents !== undefined) {
-		yield '<template shadowroot="open">';
+		yield '<template shadowroot="open" shadowrootmode="open">';
 		yield* shadowContents;
 		yield '</template>';
 	}
diff --git a/packages/integrations/lit/test/server.test.js b/packages/integrations/lit/test/server.test.js
index e7b5e98f9..439c0877d 100644
--- a/packages/integrations/lit/test/server.test.js
+++ b/packages/integrations/lit/test/server.test.js
@@ -38,7 +38,7 @@ describe('renderToStaticMarkup', () => {
 		customElements.define(tagName, class extends LitElement {});
 		const render = await renderToStaticMarkup(tagName);
 		expect(render).to.deep.equal({
-			html: `<${tagName}><template shadowroot="open"><!--lit-part--><!--/lit-part--></template></${tagName}>`,
+			html: `<${tagName}><template shadowroot="open" shadowrootmode="open"><!--lit-part--><!--/lit-part--></template></${tagName}>`,
 		});
 	});