From 333617f32ae2c92a76bd478810fb1df07b4aa453 Mon Sep 17 00:00:00 2001
From: Ryan Christian <rchristian@ryanchristian.dev>
Date: Wed, 3 Sep 2025 19:14:46 -0500
Subject: [PATCH 1/2] refactor: Do not manually call connectedCallback

---
 src/index.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/index.js b/src/index.js
index b7815a7..4916451 100644
--- a/src/index.js
+++ b/src/index.js
@@ -4,7 +4,6 @@ import { h, cloneElement, render, hydrate } from 'preact';
  * @typedef {import('./index.d.ts').PreactCustomElement} PreactCustomElement
  */
 
-
 /**
  * @type {import('./index.d.ts').default}
  */
@@ -48,7 +47,9 @@ export default function register(Component, tagName, propNames, options) {
 	propNames.forEach((name) => {
 		Object.defineProperty(PreactElement.prototype, name, {
 			get() {
-				return this._vdom.props[name];
+				return this._vdom
+					? this._vdom.props[name]
+					: this._props[name];
 			},
 			set(v) {
 				if (this._vdom) {
@@ -56,7 +57,6 @@ export default function register(Component, tagName, propNames, options) {
 				} else {
 					if (!this._props) this._props = {};
 					this._props[name] = v;
-					this.connectedCallback();
 				}
 
 				// Reflect property changes to attributes if the value is a primitive

From ea58f975607e5158b8c495d516d69fe1b7e35296 Mon Sep 17 00:00:00 2001
From: Ryan Christian <rchristian@ryanchristian.dev>
Date: Wed, 3 Sep 2025 20:04:30 -0500
Subject: [PATCH 2/2] test: Copy test case from #71

---
 src/index.test.jsx | 30 ++++++++++++++++++++++++++++--
 1 file changed, 28 insertions(+), 2 deletions(-)

diff --git a/src/index.test.jsx b/src/index.test.jsx
index ada8273..9609a08 100644
--- a/src/index.test.jsx
+++ b/src/index.test.jsx
@@ -130,6 +130,33 @@ describe('web components', () => {
 			});
 			assert.equal(other, 1);
 		});
+
+		it('sets complex property after other property', () => {
+			const el = document.createElement('x-dummy-button');
+
+			// set simple property first
+			el.text = 'click me';
+
+			let clicks = 0;
+			const onClick = () => clicks++;
+			el.onClick = onClick;
+
+			assert.equal(el.text, 'click me');
+			assert.equal(el.onClick, onClick);
+
+			root.appendChild(el);
+			assert.equal(
+				root.innerHTML,
+				'<x-dummy-button text="click me"><button>click me</button></x-dummy-button>'
+			);
+
+			act(() => {
+				el.querySelector('button').click();
+			});
+
+			assert.equal(el.onClick, onClick);
+			assert.equal(clicks, 1);
+		});
 	});
 
 	function Foo({ text, children }) {
@@ -327,8 +354,7 @@ describe('web components', () => {
 
 		const child = document
 			.querySelector('x-adopted-style-sheets')
-			.shadowRoot
-			.querySelector('.styled-child');
+			.shadowRoot.querySelector('.styled-child');
 
 		const style = getComputedStyle(child);
 		assert.equal(style.color, 'rgb(255, 0, 0)');