From e6bbe4febae95e6f4ee84684aaced04dfa0c94ee Mon Sep 17 00:00:00 2001
From: Steven Le <stevenle08@gmail.com>
Date: Fri, 9 Sep 2022 10:56:31 -0700
Subject: [PATCH 1/2] Add support for shadow DOM closed mode

---
 src/index.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/index.js b/src/index.js
index 42318d7..919cd75 100644
--- a/src/index.js
+++ b/src/index.js
@@ -5,7 +5,7 @@ export default function register(Component, tagName, propNames, options) {
 		const inst = Reflect.construct(HTMLElement, [], PreactElement);
 		inst._vdomComponent = Component;
 		inst._root =
-			options && options.shadow ? inst.attachShadow({ mode: 'open' }) : inst;
+			options && options.shadow ? inst.attachShadow({ mode: options.mode || 'open' }) : inst;
 		return inst;
 	}
 	PreactElement.prototype = Object.create(HTMLElement.prototype);

From 595903f18257d5c1d6855f4f4dfeef2999482633 Mon Sep 17 00:00:00 2001
From: Steven Le <stevenle08@gmail.com>
Date: Sat, 10 Sep 2022 08:30:26 -0700
Subject: [PATCH 2/2] Add tests for shadow DOM modes

---
 src/index.test.jsx | 34 ++++++++++++++++++++++++++++++++++
 1 file changed, 34 insertions(+)

diff --git a/src/index.test.jsx b/src/index.test.jsx
index 00da646..f293941 100644
--- a/src/index.test.jsx
+++ b/src/index.test.jsx
@@ -245,4 +245,38 @@ describe('web components', () => {
 		});
 		assert.equal(getShadowHTML(), '<p>Active theme: sunny</p>');
 	});
+
+	it('renders element in shadow dom open mode', async () => {
+		function ShadowDomOpen() {
+			return <div className="shadow-child">Shadow DOM Open</div>;
+		}
+
+		registerElement(ShadowDomOpen, 'x-shadowdom-open', [], {
+			shadow: true,
+			mode: 'open',
+		});
+
+		const el = document.createElement('x-shadowdom-open');
+		root.appendChild(el);
+		const shadowRoot = el.shadowRoot;
+		assert.isTrue(!!shadowRoot);
+		const child = shadowRoot.querySelector('.shadow-child');
+		assert.isTrue(!!child);
+		assert.equal(child.textContent, 'Shadow DOM Open');
+	});
+
+	it('renders element in shadow dom closed mode', async () => {
+		function ShadowDomClosed() {
+			return <div className="shadow-child">Shadow DOM Closed</div>;
+		}
+
+		registerElement(ShadowDomClosed, 'x-shadowdom-closed', [], {
+			shadow: true,
+			mode: 'closed',
+		});
+
+		const el = document.createElement('x-shadowdom-closed');
+		root.appendChild(el);
+		assert.isTrue(el.shadowRoot === null);
+	});
 });