Add tests for shadow DOM modes

package.json

@@ -59,6 +59,7 @@
 		"@web/dev-server-esbuild": "^0.2.2",
 		"@web/test-runner": "^0.7.12",
 		"@web/test-runner-playwright": "^0.5.4",
+		"@web/test-runner-puppeteer": "^0.10.5",
 		"eslint": "^7.7.0",
 		"eslint-config-developit": "^1.2.0",
 		"get-stream": "^6.0.0",

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);
+	});
 });