diff --git a/src/index.js b/src/index.js
index 42318d7..56ec43b 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,13 +1,16 @@
-import { h, cloneElement, render, hydrate } from 'preact';
+import { h, Fragment, cloneElement, render, hydrate } from 'preact';
 
 export default function register(Component, tagName, propNames, options) {
 	function PreactElement() {
 		const inst = Reflect.construct(HTMLElement, [], PreactElement);
 		inst._vdomComponent = Component;
-		inst._root =
-			options && options.shadow ? inst.attachShadow({ mode: 'open' }) : inst;
+		inst._shadowEnabled = options && options.shadow;
+		inst._root = inst._shadowEnabled
+			? inst.attachShadow({ mode: 'open' })
+			: inst;
 		return inst;
 	}
+
 	PreactElement.prototype = Object.create(HTMLElement.prototype);
 	PreactElement.prototype.constructor = PreactElement;
 	PreactElement.prototype.connectedCallback = connectedCallback;
@@ -24,7 +27,13 @@ export default function register(Component, tagName, propNames, options) {
 	propNames.forEach((name) => {
 		Object.defineProperty(PreactElement.prototype, name, {
 			get() {
-				return this._vdom.props[name];
+				if (this._vdom) {
+					return this._vdom.props[name];
+				}
+
+				if (!this._props) this._props = {};
+
+				return this._props[name];
 			},
 			set(v) {
 				if (this._vdom) {
@@ -32,7 +41,7 @@ export default function register(Component, tagName, propNames, options) {
 				} else {
 					if (!this._props) this._props = {};
 					this._props[name] = v;
-					this.connectedCallback();
+					this._props[toCamelCase(name)] = v;
 				}
 
 				// Reflect property changes to attributes if the value is a primitive
@@ -79,7 +88,7 @@ function connectedCallback() {
 	this._vdom = h(
 		ContextProvider,
 		{ ...this._props, context },
-		toVdom(this, this._vdomComponent)
+		toVdom(this, this._vdomComponent, this._shadowEnabled)
 	);
 	(this.hasAttribute('hydrate') ? hydrate : render)(this._vdom, this._root);
 }
@@ -114,9 +123,11 @@ function disconnectedCallback() {
  * after having fired the event.
  */
 function Slot(props, context) {
+	const { shadow, addContextListener, removeContextListener, ...rest } = props;
+
 	const ref = (r) => {
 		if (!r) {
-			this.ref.removeEventListener('_preact', this._listener);
+			removeContextListener(this._listener, this.ref);
 		} else {
 			this.ref = r;
 			if (!this._listener) {
@@ -124,14 +135,23 @@ function Slot(props, context) {
 					event.stopPropagation();
 					event.detail.context = context;
 				};
-				r.addEventListener('_preact', this._listener);
+				addContextListener(this._listener, this.ref);
 			}
 		}
 	};
-	return h('slot', { ...props, ref });
+
+	if (!shadow && !this._listener) {
+		this._listener = (event) => {
+			event.stopPropagation();
+			event.detail.context = context;
+		};
+		addContextListener(this._listener);
+	}
+
+	return h(shadow ? 'slot' : Fragment, { ...rest, ref });
 }
 
-function toVdom(element, nodeName) {
+function toVdom(element, nodeName, shadow) {
 	if (element.nodeType === 3) return element.data;
 	if (element.nodeType !== 1) return null;
 	let children = [],
@@ -147,17 +167,46 @@ function toVdom(element, nodeName) {
 	}
 
 	for (i = cn.length; i--; ) {
-		const vnode = toVdom(cn[i], null);
+		const vnode = toVdom(cn[i], null, shadow);
 		// Move slots correctly
 		const name = cn[i].slot;
 		if (name) {
-			props[name] = h(Slot, { name }, vnode);
+			props[name] = h(
+				Slot,
+				{
+					name,
+					shadow,
+					addContextListener(listener, element = cn[i]) {
+						element.addEventListener('_preact', listener);
+					},
+					removeContextListener(listener, element = cn[i]) {
+						element.removeEventListener('_preact', listener);
+					},
+				},
+				vnode
+			);
 		} else {
 			children[i] = vnode;
 		}
 	}
 
 	// Only wrap the topmost node with a slot
-	const wrappedChildren = nodeName ? h(Slot, null, children) : children;
+	const wrappedProps = {
+		shadow,
+		addContextListener(listener, e = element) {
+			e.addEventListener('_preact', listener);
+		},
+		removeContextListener(listener, e = element) {
+			e.removeEventListener('_preact', listener);
+		},
+	};
+
+	const wrappedChildren = nodeName ? h(Slot, wrappedProps, children) : children;
+
+	// Remove all children from the topmost node in non-shadow mode
+	if (!shadow && nodeName) {
+		element.innerHTML = '';
+	}
+
 	return h(nodeName || element.nodeName.toLowerCase(), props, wrappedChildren);
 }
diff --git a/src/index.test.jsx b/src/index.test.jsx
index 00da646..3fe908e 100644
--- a/src/index.test.jsx
+++ b/src/index.test.jsx
@@ -212,6 +212,9 @@ describe('web components', () => {
 	}
 
 	registerElement(DisplayTheme, 'x-display-theme', [], { shadow: true });
+	registerElement(DisplayTheme, 'x-display-theme-no-shadow', [], {
+		shadow: false,
+	});
 
 	function Parent({ children, theme = 'dark' }) {
 		return (
@@ -222,6 +225,7 @@ describe('web components', () => {
 	}
 
 	registerElement(Parent, 'x-parent', ['theme'], { shadow: true });
+	registerElement(Parent, 'x-parent-no-shadow', ['theme'], { shadow: false });
 
 	it('passes context over custom element boundaries', async () => {
 		const el = document.createElement('x-parent');
@@ -245,4 +249,53 @@ describe('web components', () => {
 		});
 		assert.equal(getShadowHTML(), '<p>Active theme: sunny</p>');
 	});
+
+	it('passes context over custom element boundaries (no shadow)', async () => {
+		const el = document.createElement('x-parent-no-shadow');
+
+		const noSlot = document.createElement('x-display-theme-no-shadow');
+		el.appendChild(noSlot);
+
+		root.appendChild(el);
+		assert.equal(
+			root.innerHTML,
+			'<x-parent-no-shadow><div class="children"><x-display-theme-no-shadow><p>Active theme: dark</p></x-display-theme-no-shadow></div></x-parent-no-shadow>'
+		);
+
+		const getDisplayThemeHTML = () =>
+			document.querySelector('x-display-theme-no-shadow').innerHTML;
+		assert.equal(getDisplayThemeHTML(), '<p>Active theme: dark</p>');
+
+		// Trigger context update
+		act(() => {
+			el.setAttribute('theme', 'sunny');
+		});
+		assert.equal(getDisplayThemeHTML(), '<p>Active theme: sunny</p>');
+	});
+
+	function NoShadow({ children }) {
+		return <div class="children">{children}</div>;
+	}
+
+	registerElement(NoShadow, 'x-no-shadow-parent', [], { shadow: false });
+
+	registerElement(NoShadow, 'x-no-shadow-children', [], { shadow: false });
+
+	it('correctly draws children without shadow', async () => {
+		const el = document.createElement('x-no-shadow-parent');
+
+		const elementChildren = document.createElement('x-no-shadow-children');
+
+		const spanChildren = document.createElement('span');
+		spanChildren.innerHTML = 'hello world';
+
+		elementChildren.appendChild(spanChildren);
+		el.appendChild(elementChildren);
+
+		root.appendChild(el);
+		assert.equal(
+			root.innerHTML,
+			'<x-no-shadow-parent><div class="children"><x-no-shadow-children><div class="children"><span>hello world</span></div></x-no-shadow-children></div></x-no-shadow-parent>'
+		);
+	});
 });