fix: don't treat non-function on* props on custom elements as event handlers

src/diff/props.js

@@ -70,7 +70,17 @@ export function setProperty(dom, name, value, oldValue, namespace) {
 		}
 	}
 	// Benchmark for comparison: https://esbench.com/bench/574c954bdb965b9a00965ac6
-	else if (name[0] == 'o' && name[1] == 'n') {
+	// Custom elements may have non-event properties/attributes starting with
+	// `on` (https://github.com/preactjs/preact/issues/4085), so for tag names
+	// containing a `-` only treat `on*` props as event handlers when the new
+	// or old value is a function.
+	else if (
+		name[0] == 'o' &&
+		name[1] == 'n' &&
+		(typeof value == 'function' ||
+			typeof oldValue == 'function' ||
+			dom.localName.indexOf('-') == -1)
+	) {
 		useCapture = name != (name = name.replace(CAPTURE_REGEX, '$1'));
 
 		// Infer correct casing for DOM built-in events:

test/browser/events.test.jsx

@@ -276,6 +276,32 @@ describe('event handling', () => {
 		);
 	});
 
+	// see https://github.com/preactjs/preact/issues/4085
+	it('should set non-function on* props on custom elements as attributes', () => {
+		render(<my-tooltip only-when-overflow={true} for="a1" />, scratch);
+
+		let el = scratch.firstChild;
+		expect(el.getAttribute('only-when-overflow')).to.equal('true');
+		expect(el._listeners).to.equal(undefined);
+
+		render(<my-tooltip for="a1" />, scratch);
+		expect(el.hasAttribute('only-when-overflow')).to.equal(false);
+	});
+
+	it('should register function on* props on custom elements as handlers', () => {
+		let click = vi.fn();
+
+		render(<my-tooltip onClick={click} />, scratch);
+
+		fireEvent(scratch.firstChild, 'click');
+		expect(click).toHaveBeenCalledOnce();
+
+		render(<my-tooltip onClick={null} />, scratch);
+
+		fireEvent(scratch.firstChild, 'click');
+		expect(click).toHaveBeenCalledOnce();
+	});
+
 	it('should support camel-case focus event names', () => {
 		render(<div onFocusIn={() => {}} onFocusOut={() => {}} />, scratch);