feat: Context w/ light DOM

src/index.js

@@ -1,4 +1,4 @@
-import { h, cloneElement, render, hydrate, Fragment } from 'preact';
+import { h, cloneElement, render, hydrate } from 'preact';
 
 /**
  * @typedef {import('./internal.d.ts').PreactCustomElement} PreactCustomElement
@@ -177,8 +177,7 @@ function Slot(props, context) {
 			}
 		}
 	};
-	const { useFragment, ...rest } = props;
-	return h(useFragment ? Fragment : 'slot', { ...rest, ref });
+	return h('slot', { ...props, ref });
 }
 
 function toVdom(element, nodeName, options) {
@@ -210,9 +209,8 @@ function toVdom(element, nodeName, options) {
 	const shadow = !!(options && options.shadow);
 
 	// Only wrap the topmost node with a slot
-	const wrappedChildren = nodeName
-		? h(Slot, { useFragment: !shadow }, children)
-		: children;
+	const wrappedChildren =
+		nodeName && shadow ? h(Slot, null, children) : children;
 
 	if (!shadow && nodeName) {
 		element.innerHTML = '';

test/browser/index.test.jsx

@@ -280,11 +280,40 @@ describe('web components', () => {
 			);
 		});
 
+		it('supports controlling light DOM with other custom elements', () => {
+			function Parent({ children }) {
+				return (
+					<Fragment>
+						<h1>Light DOM Children</h1>
+						<div>{children}</div>
+					</Fragment>
+				);
+			}
+
+			function Child() {
+				return <p>Child</p>;
+			}
+
+			registerElement(Parent, 'light-dom-children-parent', []);
+			registerElement(Child, 'light-dom-children-child', []);
+
+			const parent = document.createElement('light-dom-children-parent');
+			const child = document.createElement('light-dom-children-child');
+
+			parent.appendChild(child);
+			root.appendChild(parent);
+
+			assert.equal(
+				document.querySelector('light-dom-children-parent').innerHTML,
+				'<h1>Light DOM Children</h1><div><light-dom-children-child><p>Child</p></light-dom-children-child></div>'
+			);
+		});
+
 		it('supports controlling shadow DOM children', () => {
 			function ShadowDomChildren({ children }) {
 				return (
 					<Fragment>
-						<h1>Light DOM Children</h1>
+						<h1>Shadow DOM Children</h1>
 						<div>{children}</div>
 					</Fragment>
 				);
@@ -298,8 +327,45 @@ describe('web components', () => {
 
 			assert.equal(
 				document.querySelector('shadow-dom-children').shadowRoot.innerHTML,
-				'<h1>Light DOM Children</h1><div><slot><p>Child 1</p><p>Child 2</p></slot></div>'
+				'<h1>Shadow DOM Children</h1><div><slot><p>Child 1</p><p>Child 2</p></slot></div>'
+			);
+		});
+
+		it('supports controlling shadow DOM with other custom elements', () => {
+			function Parent({ children }) {
+				return (
+					<Fragment>
+						<h1>Shadow DOM Children</h1>
+						<div>{children}</div>
+					</Fragment>
+				);
+			}
+
+			function Child() {
+				return <p>Child</p>;
+			}
+
+			registerElement(Parent, 'shadow-dom-children-parent', [], {
+				shadow: true,
+			});
+			registerElement(Child, 'shadow-dom-children-child', [], {
+				shadow: true,
+			});
+
+			const parent = document.createElement('shadow-dom-children-parent');
+			const child = document.createElement('shadow-dom-children-child');
+
+			parent.appendChild(child);
+			root.appendChild(parent);
+
+			const getShadowHTML = (selector) =>
+				document.querySelector(selector).shadowRoot.innerHTML;
+
+			assert.equal(
+				getShadowHTML('shadow-dom-children-parent'),
+				'<h1>Shadow DOM Children</h1><div><slot><shadow-dom-children-child></shadow-dom-children-child></slot></div>'
 			);
+			assert.equal(getShadowHTML('shadow-dom-children-child'), '<p>Child</p>');
 		});
 	});
 
@@ -344,5 +410,45 @@ describe('web components', () => {
 			});
 			assert.equal(getShadowHTML(), '<p>Active theme: sunny</p>');
 		});
+
+		it.only('passes context over light DOM custom element boundaries', async () => {
+			const Theme = createContext('light');
+
+			function DisplayTheme() {
+				const theme = useContext(Theme);
+				return <p>Active theme: {theme}</p>;
+			}
+
+			function Parent({ children, theme = 'dark' }) {
+				return (
+					<Theme.Provider value={theme}>
+						<div class="children">{children}</div>
+					</Theme.Provider>
+				);
+			}
+
+			registerElement(Parent, 'x-light-dom-parent', ['theme']);
+			registerElement(DisplayTheme, 'x-light-dom-child', []);
+
+			const el = document.createElement('x-light-dom-parent');
+
+			const noSlot = document.createElement('x-light-dom-child');
+			el.appendChild(noSlot);
+
+			root.appendChild(el);
+			assert.equal(
+				root.innerHTML,
+				'<x-light-dom-parent><div class="children"><x-light-dom-child><p>Active theme: dark</p></x-light-dom-child></div></x-light-dom-parent>'
+			);
+
+			// Trigger context update
+			act(() => {
+				el.setAttribute('theme', 'sunny');
+			});
+			assert.equal(
+				root.innerHTML,
+				'<x-light-dom-parent><div class="children"><x-light-dom-child><p>Active theme: sunny</p></x-light-dom-child></div></x-light-dom-parent>'
+			);
+		});
 	});
 });