From dbf981d44a4e6edae55f1245a7296b34b004fd9d Mon Sep 17 00:00:00 2001
From: plusgut <github@webentwickler2-0.de>
Date: Tue, 1 Sep 2026 10:40:12 +0200
Subject: [PATCH 1/3] feat(inheritance): implement callbacks via inheritance

---
 src/index.ts           |  23 +-----
 src/utils.ts           | 155 +++++++++++++++++++++--------------------
 test/async.test.tsx    |   4 +-
 test/base.test.tsx     |  16 ++---
 test/context.test.tsx  |  12 ++--
 test/error.test.tsx    |   6 +-
 test/events.test.tsx   |  10 +--
 test/fragment.test.tsx |   4 +-
 test/host.test.tsx     |  12 ++--
 test/svg.test.tsx      |   4 +-
 10 files changed, 114 insertions(+), 132 deletions(-)

diff --git a/src/index.ts b/src/index.ts
index 990a237..33b023a 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -2,18 +2,10 @@ import { effect, Signal, signal } from "@preact/signals-core";
 import { reconcile } from "./reconciler/index";
 import { ShadowCache } from "./reconciler/utils";
 import type { CustomEvents, ForbiddenHTMLProperties, ReadonlyKeys, ShadowElement } from "./types";
-import {
-  connectedCallback,
-  disconnectedCallback,
-  parentsCacheSymbol,
-  PlusnewErrorEvent,
-  active,
-  addEventListener,
-  removeEventListener,
-} from "./utils";
+import { parentsCacheSymbol, PlusnewErrorEvent, active } from "./utils";
 
 export type { ShadowElement } from "./types";
-export { active, connectedCallback, disconnectedCallback } from "./utils";
+export { active, WebComponent as Webcomponent } from "./utils";
 
 export function mount(render: () => ShadowElement, parent: HTMLElement): () => void {
   const shadowResult: ShadowCache = new ShadowCache(false);
@@ -60,17 +52,6 @@ export function createComponent<T extends HTMLElement & { render: (this: T) => S
     },
   ): T;
 } {
-  if ("connectedCallback" in Component.prototype === false) {
-    Component.prototype.connectedCallback = connectedCallback;
-  }
-
-  if ("disconnectedCallback" in Component.prototype === false) {
-    Component.prototype.disconnectedCallback = disconnectedCallback;
-  }
-
-  Component.prototype.addEventListener = addEventListener;
-  Component.prototype.removeEventListener = removeEventListener;
-
   customElements.define(name, Component as any);
 
   return name as any;
diff --git a/src/utils.ts b/src/utils.ts
index a180d55..7a08956 100644
--- a/src/utils.ts
+++ b/src/utils.ts
@@ -33,101 +33,102 @@ export function dispatchError(element: Element, error: unknown) {
 const disconnect = Symbol("disconnect");
 const shadowCache = Symbol("shadowCache");
 const eventListenerSymbol = Symbol("eventListner");
-
 export const parentsCacheSymbol = Symbol("parentsCache");
 
-export function connectedCallback(
-  this: HTMLElement & { render: () => ShadowElement },
-  opt?: { shadowRootInit?: Partial<ShadowRootInit> },
-): ShadowRoot {
-  let shadowRoot: null | ShadowRoot = null;
-  if (this.shadowRoot === null) {
-    shadowRoot = this.attachShadow({ mode: "open", ...opt?.shadowRootInit });
-
-    (this as any)[parentsCacheSymbol] = new Map();
-    (this as any)[shadowCache] = new ShadowCache(false);
-  } else {
-    shadowRoot = this.shadowRoot;
-  }
+export abstract class WebComponent extends HTMLElement {
+  abstract render(): ShadowElement;
 
-  (this as any)[disconnect] = effect(() => {
-    batch(() => {
-      const previousActiveElement = active.parentElement;
-      let result: ShadowElement;
-      try {
-        active.parentElement = this;
-        result = this.render();
-        active.parentElement = previousActiveElement;
-      } catch (error) {
-        active.parentElement = previousActiveElement;
-        untracked(() => dispatchError(this, error));
-
-        return;
-      }
+  connectedCallback(this: WebComponent, opt?: { shadowRootInit?: Partial<ShadowRootInit> }) {
+    let shadowRoot: null | ShadowRoot = null;
+    if (this.shadowRoot === null) {
+      shadowRoot = this.attachShadow({ mode: "open", ...opt?.shadowRootInit });
 
-      reconcile({
-        parentElement: this.shadowRoot as ShadowRoot,
-        previousSibling: null,
-        shadowCache: (this as any)[shadowCache],
-        shadowElement: result,
+      (this as any)[parentsCacheSymbol] = new Map();
+      (this as any)[shadowCache] = new ShadowCache(false);
+    } else {
+      shadowRoot = this.shadowRoot;
+    }
+
+    (this as any)[disconnect] = effect(() => {
+      batch(() => {
+        const previousActiveElement = active.parentElement;
+        let result: ShadowElement;
+        try {
+          active.parentElement = this;
+          result = this.render();
+          active.parentElement = previousActiveElement;
+        } catch (error) {
+          active.parentElement = previousActiveElement;
+          untracked(() => dispatchError(this, error));
+
+          return;
+        }
+
+        reconcile({
+          parentElement: this.shadowRoot as ShadowRoot,
+          previousSibling: null,
+          shadowCache: (this as any)[shadowCache],
+          shadowElement: result,
+        });
       });
     });
-  });
-
-  return shadowRoot;
-}
-
-export function disconnectedCallback(this: HTMLElement & { render: () => ShadowElement }) {
-  (this as any)[disconnect]();
-  (this as any)[parentsCacheSymbol].clear();
-  (this as any)[shadowCache].unmount();
-}
 
-export function addEventListener(
-  this: HTMLElement,
-  eventName: string,
-  listener: (event: Event) => unknown,
-  options?: boolean | AddEventListenerOptions,
-) {
-  if (eventListenerSymbol in this === false) {
-    (this as any)[eventListenerSymbol] = {};
+    return shadowRoot;
   }
-  if (eventName in (this as any)[eventListenerSymbol] === false) {
-    (this as any)[eventListenerSymbol][eventName] = new WeakMap();
+
+  disconnectedCallback(this: WebComponent) {
+    if (disconnect in this) {
+      (this as any)[disconnect]();
+    }
+    if (parentsCacheSymbol in this) {
+      (this as any)[parentsCacheSymbol].clear();
+    }
+    if (shadowCache in this) {
+      (this as any)[shadowCache].unmount();
+    }
   }
 
-  const listenerOverwrite = (evt: Event) => {
-    if (typeof options === "object" && options !== null && options?.once === true) {
-      (this as any)[eventListenerSymbol]?.[eventName]?.delete(listener);
+  addEventListener(
+    eventName: string,
+    listener: (event: Event) => unknown,
+    options?: boolean | AddEventListenerOptions,
+  ) {
+    if (eventListenerSymbol in this === false) {
+      (this as any)[eventListenerSymbol] = {};
+    }
+    if (eventName in (this as any)[eventListenerSymbol] === false) {
+      (this as any)[eventListenerSymbol][eventName] = new WeakMap();
     }
 
-    const result = listener(evt);
+    const listenerOverwrite = (evt: Event) => {
+      if (typeof options === "object" && options !== null && options?.once === true) {
+        (this as any)[eventListenerSymbol]?.[eventName]?.delete(listener);
+      }
 
-    if (result instanceof Promise && active.eventPromises !== null) {
-      active.eventPromises.push(result);
-    }
-  };
+      const result = listener(evt);
 
-  (this as any)[eventListenerSymbol][eventName].set(listener, listenerOverwrite);
+      if (result instanceof Promise && active.eventPromises !== null) {
+        active.eventPromises.push(result);
+      }
+    };
 
-  HTMLElement.prototype.addEventListener.call(this, eventName, listenerOverwrite, options);
-}
+    (this as any)[eventListenerSymbol][eventName].set(listener, listenerOverwrite);
 
-export function removeEventListener(
-  this: HTMLElement,
-  eventName: string,
-  listener: (event: Event) => void,
-) {
-  if (
-    eventListenerSymbol in this === true &&
-    eventName in (this as any)[eventListenerSymbol] === true
-  ) {
-    const listenerOverwrite = (this as any)[eventListenerSymbol][eventName].get(listener);
+    super.addEventListener(eventName, listenerOverwrite, options);
+  }
 
-    if (listenerOverwrite !== undefined) {
-      (this as any)[eventListenerSymbol][eventName].delete(listener);
+  removeEventListener(this: HTMLElement, eventName: string, listener: (event: Event) => void) {
+    if (
+      eventListenerSymbol in this === true &&
+      eventName in (this as any)[eventListenerSymbol] === true
+    ) {
+      const listenerOverwrite = (this as any)[eventListenerSymbol][eventName].get(listener);
 
-      HTMLElement.prototype.removeEventListener.call(this, eventName, listenerOverwrite);
+      if (listenerOverwrite !== undefined) {
+        (this as any)[eventListenerSymbol][eventName].delete(listener);
+
+        super.removeEventListener(eventName, listenerOverwrite);
+      }
     }
   }
 }
diff --git a/test/async.test.tsx b/test/async.test.tsx
index 9ae6c07..9ec740a 100644
--- a/test/async.test.tsx
+++ b/test/async.test.tsx
@@ -1,5 +1,5 @@
 import { expect } from "@esm-bundle/chai";
-import { createComponent, mount, dispatchEvent } from "@plusnew/webcomponent";
+import { createComponent, mount, dispatchEvent, Webcomponent } from "@plusnew/webcomponent";
 import { signal } from "@preact/signals-core";
 
 describe("webcomponent", () => {
@@ -19,7 +19,7 @@ describe("webcomponent", () => {
 
     const Component = createComponent(
       "test-async-dispatch",
-      class Component extends HTMLElement {
+      class Component extends Webcomponent {
         onfoo: (evt: CustomEvent<null>) => void;
 
         #loading = signal(false);
diff --git a/test/base.test.tsx b/test/base.test.tsx
index d03b249..b8e52a8 100644
--- a/test/base.test.tsx
+++ b/test/base.test.tsx
@@ -1,5 +1,5 @@
 import { expect } from "@esm-bundle/chai";
-import { createComponent, mount, prop } from "@plusnew/webcomponent";
+import { createComponent, mount, prop, Webcomponent } from "@plusnew/webcomponent";
 import type { Signal } from "@preact/signals-core";
 import { signal } from "@preact/signals-core";
 
@@ -18,7 +18,7 @@ describe("webcomponent", () => {
   it("creates basic component and updating its props", () => {
     const Component = createComponent(
       "test-base",
-      class Component extends HTMLElement {
+      class Component extends Webcomponent {
         @prop() accessor foo: string;
 
         #baz = signal("baz");
@@ -56,7 +56,7 @@ describe("webcomponent", () => {
   it("crates array based on given number", () => {
     const Component = createComponent(
       "test-array",
-      class Component extends HTMLElement {
+      class Component extends Webcomponent {
         @prop() accessor amount: number;
 
         render() {
@@ -94,7 +94,7 @@ describe("webcomponent", () => {
   it("crates element if needed", () => {
     const Component = createComponent(
       "test-placeholder",
-      class Component extends HTMLElement {
+      class Component extends Webcomponent {
         @prop() accessor show: boolean;
 
         render() {
@@ -135,7 +135,7 @@ describe("webcomponent", () => {
 
     const Component = createComponent(
       "test-container",
-      class Component extends HTMLElement {
+      class Component extends Webcomponent {
         render() {
           containerRenderCount++;
           return <NestedComponent />;
@@ -145,7 +145,7 @@ describe("webcomponent", () => {
 
     const NestedComponent = createComponent(
       "test-nest",
-      class Component extends HTMLElement {
+      class Component extends Webcomponent {
         render() {
           nestedRenderCount++;
           return `${foo.value}`;
@@ -180,7 +180,7 @@ describe("webcomponent", () => {
 
     const NestedComponent = createComponent(
       "test-counter-constructor",
-      class Component extends HTMLElement {
+      class Component extends Webcomponent {
         #counter: Signal<number>;
         constructor() {
           super();
@@ -206,7 +206,7 @@ describe("webcomponent", () => {
 
     const Component = createComponent(
       "test-container-rerender",
-      class Component extends HTMLElement {
+      class Component extends Webcomponent {
         render() {
           containerRenderCounter += 1;
           return <NestedComponent />;
diff --git a/test/context.test.tsx b/test/context.test.tsx
index bdf3513..217c765 100644
--- a/test/context.test.tsx
+++ b/test/context.test.tsx
@@ -1,10 +1,10 @@
 import { expect } from "@esm-bundle/chai";
-import { mount, createComponent, findParent } from "@plusnew/webcomponent";
+import { mount, createComponent, findParent, Webcomponent } from "@plusnew/webcomponent";
 import { signal } from "@preact/signals-core";
 
 const Provider = createComponent(
   "test-provider",
-  class Component extends HTMLElement {
+  class Component extends Webcomponent {
     readonly foo = signal("bar");
 
     render() {
@@ -15,7 +15,7 @@ const Provider = createComponent(
 
 const Consumer = createComponent(
   "test-consumer",
-  class Component extends HTMLElement {
+  class Component extends Webcomponent {
     render() {
       try {
         return findParent(Provider).foo.value;
@@ -71,7 +71,7 @@ describe("webcomponent", () => {
   it("finds context inline", () => {
     const Component = createComponent(
       "test-inline",
-      class Component extends HTMLElement {
+      class Component extends Webcomponent {
         render() {
           return <Provider>{findParent(Provider).foo.value}</Provider>;
         }
@@ -97,7 +97,7 @@ describe("webcomponent", () => {
   it("finds context in event", () => {
     const Component = createComponent(
       "test-event",
-      class Component extends HTMLElement {
+      class Component extends Webcomponent {
         render() {
           return (
             <Provider>
@@ -136,7 +136,7 @@ describe("webcomponent", () => {
   it("no context", () => {
     const Injection = createComponent(
       "test-injection",
-      class Component extends HTMLElement {
+      class Component extends Webcomponent {
         render() {
           return (
             <Provider>
diff --git a/test/error.test.tsx b/test/error.test.tsx
index 53e5747..14c7825 100644
--- a/test/error.test.tsx
+++ b/test/error.test.tsx
@@ -1,5 +1,5 @@
 import { expect } from "@esm-bundle/chai";
-import { createComponent, mount } from "@plusnew/webcomponent";
+import { createComponent, mount, Webcomponent } from "@plusnew/webcomponent";
 import { signal } from "@preact/signals-core";
 
 function error(): never {
@@ -21,7 +21,7 @@ describe("webcomponent", () => {
   it("creates broken component and should display error", () => {
     const Component = createComponent(
       "test-broken",
-      class Component extends HTMLElement {
+      class Component extends Webcomponent {
         #hasError = signal(false);
         render() {
           return this.#hasError.value ? (
@@ -55,7 +55,7 @@ describe("webcomponent", () => {
 
   //   const Component = webcomponent(
   //     "test-later-broken",
-  //     class Component extends HTMLElement {
+  //     class Component extends Webcomponent {
   //       render() {
   //         if (foo.value === true) {
   //           return "good";
diff --git a/test/events.test.tsx b/test/events.test.tsx
index a134f78..a49ff3d 100644
--- a/test/events.test.tsx
+++ b/test/events.test.tsx
@@ -1,5 +1,5 @@
 import { expect } from "@esm-bundle/chai";
-import { createComponent, dispatchEvent, mount, prop } from "@plusnew/webcomponent";
+import { createComponent, dispatchEvent, mount, prop, Webcomponent } from "@plusnew/webcomponent";
 import { signal } from "@preact/signals-core";
 
 describe("webcomponent", () => {
@@ -18,7 +18,7 @@ describe("webcomponent", () => {
     let counter = 0;
     const Component = createComponent(
       "test-base",
-      class Component extends HTMLElement {
+      class Component extends Webcomponent {
         render() {
           return (
             <NestedComponent
@@ -34,7 +34,7 @@ describe("webcomponent", () => {
 
     const NestedComponent = createComponent(
       "test-nested",
-      class NestedComponent extends HTMLElement {
+      class NestedComponent extends Webcomponent {
         onfoo: (evt: CustomEvent<string>) => void;
         render(this: NestedComponent) {
           return <button onclick={() => dispatchEvent(this, "foo", { detail: "mep" })} />;
@@ -63,7 +63,7 @@ describe("webcomponent", () => {
     let counter = 0;
     const Component = createComponent(
       "test-dereference-container",
-      class Component extends HTMLElement {
+      class Component extends Webcomponent {
         #counter = signal(0);
         render() {
           return (
@@ -82,7 +82,7 @@ describe("webcomponent", () => {
 
     const NestedComponent = createComponent(
       "test-deference",
-      class NestedComponent extends HTMLElement {
+      class NestedComponent extends Webcomponent {
         @prop() accessor foo: number;
         onfoo: (evt: CustomEvent<number>) => void;
         render(this: NestedComponent) {
diff --git a/test/fragment.test.tsx b/test/fragment.test.tsx
index a71d382..c220e24 100644
--- a/test/fragment.test.tsx
+++ b/test/fragment.test.tsx
@@ -1,5 +1,5 @@
 import { expect } from "@esm-bundle/chai";
-import { createComponent, mount, prop } from "@plusnew/webcomponent";
+import { createComponent, mount, prop, Webcomponent } from "@plusnew/webcomponent";
 import { signal } from "@preact/signals-core";
 
 describe("fragment", () => {
@@ -18,7 +18,7 @@ describe("fragment", () => {
     const baz = signal("foo");
     const Component = createComponent(
       "test-base",
-      class Component extends HTMLElement {
+      class Component extends Webcomponent {
         @prop() accessor foo: string;
 
         render() {
diff --git a/test/host.test.tsx b/test/host.test.tsx
index be90339..d55604f 100644
--- a/test/host.test.tsx
+++ b/test/host.test.tsx
@@ -1,5 +1,5 @@
 import { expect } from "@esm-bundle/chai";
-import { createComponent, mount } from "@plusnew/webcomponent";
+import { createComponent, mount, Webcomponent } from "@plusnew/webcomponent";
 import { signal } from "@preact/signals-core";
 
 describe("webcomponent", () => {
@@ -19,7 +19,7 @@ describe("webcomponent", () => {
 
     const Component = createComponent(
       "test-property",
-      class Component extends HTMLElement {
+      class Component extends Webcomponent {
         render() {
           return add.value ? <span className="foo" /> : <span />;
         }
@@ -46,7 +46,7 @@ describe("webcomponent", () => {
   it("registers click event", async () => {
     const Component = createComponent(
       "test-click",
-      class Component extends HTMLElement {
+      class Component extends Webcomponent {
         #baz = signal(0);
 
         render() {
@@ -91,7 +91,7 @@ describe("webcomponent", () => {
   it("registers input event and updating", async () => {
     const Component = createComponent(
       "test-input-update",
-      class Component extends HTMLElement {
+      class Component extends Webcomponent {
         #baz = signal("foo");
 
         render() {
@@ -130,7 +130,7 @@ describe("webcomponent", () => {
   it("registers input event without updating", async () => {
     const Component = createComponent(
       "test-input-reject",
-      class Component extends HTMLElement {
+      class Component extends Webcomponent {
         #baz = signal("foo");
 
         render() {
@@ -167,7 +167,7 @@ describe("webcomponent", () => {
 
     const Component = createComponent(
       "test-style",
-      class Component extends HTMLElement {
+      class Component extends Webcomponent {
         render() {
           return backgroundColor.value === null && fontColor.value === null ? (
             <span />
diff --git a/test/svg.test.tsx b/test/svg.test.tsx
index 37c9ddd..1d03c2f 100644
--- a/test/svg.test.tsx
+++ b/test/svg.test.tsx
@@ -1,5 +1,5 @@
 import { expect } from "@esm-bundle/chai";
-import { createComponent, mount } from "@plusnew/webcomponent";
+import { createComponent, mount, Webcomponent } from "@plusnew/webcomponent";
 
 describe("svg", () => {
   let container: HTMLElement;
@@ -16,7 +16,7 @@ describe("svg", () => {
   it("async event dispatch", async () => {
     const Component = createComponent(
       "test-svg",
-      class Component extends HTMLElement {
+      class Component extends Webcomponent {
         render(this: Component) {
           return (
             <svg>

From 09e259bcc3cbff38aa8370ea18a2cf97d5af6731 Mon Sep 17 00:00:00 2001
From: plusgut <github@webentwickler2-0.de>
Date: Tue, 1 Sep 2026 10:51:05 +0200
Subject: [PATCH 2/3] fix: rename Webcomponent to WebComponent

---
 src/index.ts           |  2 +-
 test/async.test.tsx    |  4 ++--
 test/base.test.tsx     | 16 ++++++++--------
 test/context.test.tsx  | 12 ++++++------
 test/error.test.tsx    |  6 +++---
 test/events.test.tsx   | 10 +++++-----
 test/fragment.test.tsx |  4 ++--
 test/host.test.tsx     | 12 ++++++------
 test/svg.test.tsx      |  4 ++--
 9 files changed, 35 insertions(+), 35 deletions(-)

diff --git a/src/index.ts b/src/index.ts
index 33b023a..cf01c6f 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -5,7 +5,7 @@ import type { CustomEvents, ForbiddenHTMLProperties, ReadonlyKeys, ShadowElement
 import { parentsCacheSymbol, PlusnewErrorEvent, active } from "./utils";
 
 export type { ShadowElement } from "./types";
-export { active, WebComponent as Webcomponent } from "./utils";
+export { active, WebComponent } from "./utils";
 
 export function mount(render: () => ShadowElement, parent: HTMLElement): () => void {
   const shadowResult: ShadowCache = new ShadowCache(false);
diff --git a/test/async.test.tsx b/test/async.test.tsx
index 9ec740a..5cd908a 100644
--- a/test/async.test.tsx
+++ b/test/async.test.tsx
@@ -1,5 +1,5 @@
 import { expect } from "@esm-bundle/chai";
-import { createComponent, mount, dispatchEvent, Webcomponent } from "@plusnew/webcomponent";
+import { createComponent, mount, dispatchEvent, WebComponent } from "@plusnew/webcomponent";
 import { signal } from "@preact/signals-core";
 
 describe("webcomponent", () => {
@@ -19,7 +19,7 @@ describe("webcomponent", () => {
 
     const Component = createComponent(
       "test-async-dispatch",
-      class Component extends Webcomponent {
+      class Component extends WebComponent {
         onfoo: (evt: CustomEvent<null>) => void;
 
         #loading = signal(false);
diff --git a/test/base.test.tsx b/test/base.test.tsx
index b8e52a8..0b0ef4b 100644
--- a/test/base.test.tsx
+++ b/test/base.test.tsx
@@ -1,5 +1,5 @@
 import { expect } from "@esm-bundle/chai";
-import { createComponent, mount, prop, Webcomponent } from "@plusnew/webcomponent";
+import { createComponent, mount, prop, WebComponent } from "@plusnew/webcomponent";
 import type { Signal } from "@preact/signals-core";
 import { signal } from "@preact/signals-core";
 
@@ -18,7 +18,7 @@ describe("webcomponent", () => {
   it("creates basic component and updating its props", () => {
     const Component = createComponent(
       "test-base",
-      class Component extends Webcomponent {
+      class Component extends WebComponent {
         @prop() accessor foo: string;
 
         #baz = signal("baz");
@@ -56,7 +56,7 @@ describe("webcomponent", () => {
   it("crates array based on given number", () => {
     const Component = createComponent(
       "test-array",
-      class Component extends Webcomponent {
+      class Component extends WebComponent {
         @prop() accessor amount: number;
 
         render() {
@@ -94,7 +94,7 @@ describe("webcomponent", () => {
   it("crates element if needed", () => {
     const Component = createComponent(
       "test-placeholder",
-      class Component extends Webcomponent {
+      class Component extends WebComponent {
         @prop() accessor show: boolean;
 
         render() {
@@ -135,7 +135,7 @@ describe("webcomponent", () => {
 
     const Component = createComponent(
       "test-container",
-      class Component extends Webcomponent {
+      class Component extends WebComponent {
         render() {
           containerRenderCount++;
           return <NestedComponent />;
@@ -145,7 +145,7 @@ describe("webcomponent", () => {
 
     const NestedComponent = createComponent(
       "test-nest",
-      class Component extends Webcomponent {
+      class Component extends WebComponent {
         render() {
           nestedRenderCount++;
           return `${foo.value}`;
@@ -180,7 +180,7 @@ describe("webcomponent", () => {
 
     const NestedComponent = createComponent(
       "test-counter-constructor",
-      class Component extends Webcomponent {
+      class Component extends WebComponent {
         #counter: Signal<number>;
         constructor() {
           super();
@@ -206,7 +206,7 @@ describe("webcomponent", () => {
 
     const Component = createComponent(
       "test-container-rerender",
-      class Component extends Webcomponent {
+      class Component extends WebComponent {
         render() {
           containerRenderCounter += 1;
           return <NestedComponent />;
diff --git a/test/context.test.tsx b/test/context.test.tsx
index 217c765..a369646 100644
--- a/test/context.test.tsx
+++ b/test/context.test.tsx
@@ -1,10 +1,10 @@
 import { expect } from "@esm-bundle/chai";
-import { mount, createComponent, findParent, Webcomponent } from "@plusnew/webcomponent";
+import { mount, createComponent, findParent, WebComponent } from "@plusnew/webcomponent";
 import { signal } from "@preact/signals-core";
 
 const Provider = createComponent(
   "test-provider",
-  class Component extends Webcomponent {
+  class Component extends WebComponent {
     readonly foo = signal("bar");
 
     render() {
@@ -15,7 +15,7 @@ const Provider = createComponent(
 
 const Consumer = createComponent(
   "test-consumer",
-  class Component extends Webcomponent {
+  class Component extends WebComponent {
     render() {
       try {
         return findParent(Provider).foo.value;
@@ -71,7 +71,7 @@ describe("webcomponent", () => {
   it("finds context inline", () => {
     const Component = createComponent(
       "test-inline",
-      class Component extends Webcomponent {
+      class Component extends WebComponent {
         render() {
           return <Provider>{findParent(Provider).foo.value}</Provider>;
         }
@@ -97,7 +97,7 @@ describe("webcomponent", () => {
   it("finds context in event", () => {
     const Component = createComponent(
       "test-event",
-      class Component extends Webcomponent {
+      class Component extends WebComponent {
         render() {
           return (
             <Provider>
@@ -136,7 +136,7 @@ describe("webcomponent", () => {
   it("no context", () => {
     const Injection = createComponent(
       "test-injection",
-      class Component extends Webcomponent {
+      class Component extends WebComponent {
         render() {
           return (
             <Provider>
diff --git a/test/error.test.tsx b/test/error.test.tsx
index 14c7825..998e34d 100644
--- a/test/error.test.tsx
+++ b/test/error.test.tsx
@@ -1,5 +1,5 @@
 import { expect } from "@esm-bundle/chai";
-import { createComponent, mount, Webcomponent } from "@plusnew/webcomponent";
+import { createComponent, mount, WebComponent } from "@plusnew/webcomponent";
 import { signal } from "@preact/signals-core";
 
 function error(): never {
@@ -21,7 +21,7 @@ describe("webcomponent", () => {
   it("creates broken component and should display error", () => {
     const Component = createComponent(
       "test-broken",
-      class Component extends Webcomponent {
+      class Component extends WebComponent {
         #hasError = signal(false);
         render() {
           return this.#hasError.value ? (
@@ -55,7 +55,7 @@ describe("webcomponent", () => {
 
   //   const Component = webcomponent(
   //     "test-later-broken",
-  //     class Component extends Webcomponent {
+  //     class Component extends WebComponent {
   //       render() {
   //         if (foo.value === true) {
   //           return "good";
diff --git a/test/events.test.tsx b/test/events.test.tsx
index a49ff3d..665ebbd 100644
--- a/test/events.test.tsx
+++ b/test/events.test.tsx
@@ -1,5 +1,5 @@
 import { expect } from "@esm-bundle/chai";
-import { createComponent, dispatchEvent, mount, prop, Webcomponent } from "@plusnew/webcomponent";
+import { createComponent, dispatchEvent, mount, prop, WebComponent } from "@plusnew/webcomponent";
 import { signal } from "@preact/signals-core";
 
 describe("webcomponent", () => {
@@ -18,7 +18,7 @@ describe("webcomponent", () => {
     let counter = 0;
     const Component = createComponent(
       "test-base",
-      class Component extends Webcomponent {
+      class Component extends WebComponent {
         render() {
           return (
             <NestedComponent
@@ -34,7 +34,7 @@ describe("webcomponent", () => {
 
     const NestedComponent = createComponent(
       "test-nested",
-      class NestedComponent extends Webcomponent {
+      class NestedComponent extends WebComponent {
         onfoo: (evt: CustomEvent<string>) => void;
         render(this: NestedComponent) {
           return <button onclick={() => dispatchEvent(this, "foo", { detail: "mep" })} />;
@@ -63,7 +63,7 @@ describe("webcomponent", () => {
     let counter = 0;
     const Component = createComponent(
       "test-dereference-container",
-      class Component extends Webcomponent {
+      class Component extends WebComponent {
         #counter = signal(0);
         render() {
           return (
@@ -82,7 +82,7 @@ describe("webcomponent", () => {
 
     const NestedComponent = createComponent(
       "test-deference",
-      class NestedComponent extends Webcomponent {
+      class NestedComponent extends WebComponent {
         @prop() accessor foo: number;
         onfoo: (evt: CustomEvent<number>) => void;
         render(this: NestedComponent) {
diff --git a/test/fragment.test.tsx b/test/fragment.test.tsx
index c220e24..3ae8a80 100644
--- a/test/fragment.test.tsx
+++ b/test/fragment.test.tsx
@@ -1,5 +1,5 @@
 import { expect } from "@esm-bundle/chai";
-import { createComponent, mount, prop, Webcomponent } from "@plusnew/webcomponent";
+import { createComponent, mount, prop, WebComponent } from "@plusnew/webcomponent";
 import { signal } from "@preact/signals-core";
 
 describe("fragment", () => {
@@ -18,7 +18,7 @@ describe("fragment", () => {
     const baz = signal("foo");
     const Component = createComponent(
       "test-base",
-      class Component extends Webcomponent {
+      class Component extends WebComponent {
         @prop() accessor foo: string;
 
         render() {
diff --git a/test/host.test.tsx b/test/host.test.tsx
index d55604f..bb60deb 100644
--- a/test/host.test.tsx
+++ b/test/host.test.tsx
@@ -1,5 +1,5 @@
 import { expect } from "@esm-bundle/chai";
-import { createComponent, mount, Webcomponent } from "@plusnew/webcomponent";
+import { createComponent, mount, WebComponent } from "@plusnew/webcomponent";
 import { signal } from "@preact/signals-core";
 
 describe("webcomponent", () => {
@@ -19,7 +19,7 @@ describe("webcomponent", () => {
 
     const Component = createComponent(
       "test-property",
-      class Component extends Webcomponent {
+      class Component extends WebComponent {
         render() {
           return add.value ? <span className="foo" /> : <span />;
         }
@@ -46,7 +46,7 @@ describe("webcomponent", () => {
   it("registers click event", async () => {
     const Component = createComponent(
       "test-click",
-      class Component extends Webcomponent {
+      class Component extends WebComponent {
         #baz = signal(0);
 
         render() {
@@ -91,7 +91,7 @@ describe("webcomponent", () => {
   it("registers input event and updating", async () => {
     const Component = createComponent(
       "test-input-update",
-      class Component extends Webcomponent {
+      class Component extends WebComponent {
         #baz = signal("foo");
 
         render() {
@@ -130,7 +130,7 @@ describe("webcomponent", () => {
   it("registers input event without updating", async () => {
     const Component = createComponent(
       "test-input-reject",
-      class Component extends Webcomponent {
+      class Component extends WebComponent {
         #baz = signal("foo");
 
         render() {
@@ -167,7 +167,7 @@ describe("webcomponent", () => {
 
     const Component = createComponent(
       "test-style",
-      class Component extends Webcomponent {
+      class Component extends WebComponent {
         render() {
           return backgroundColor.value === null && fontColor.value === null ? (
             <span />
diff --git a/test/svg.test.tsx b/test/svg.test.tsx
index 1d03c2f..ee15ad4 100644
--- a/test/svg.test.tsx
+++ b/test/svg.test.tsx
@@ -1,5 +1,5 @@
 import { expect } from "@esm-bundle/chai";
-import { createComponent, mount, Webcomponent } from "@plusnew/webcomponent";
+import { createComponent, mount, WebComponent } from "@plusnew/webcomponent";
 
 describe("svg", () => {
   let container: HTMLElement;
@@ -16,7 +16,7 @@ describe("svg", () => {
   it("async event dispatch", async () => {
     const Component = createComponent(
       "test-svg",
-      class Component extends Webcomponent {
+      class Component extends WebComponent {
         render(this: Component) {
           return (
             <svg>

From 0cf8a61f3dcce883a203273b2cd36c9c8e416dca Mon Sep 17 00:00:00 2001
From: plusgut <github@webentwickler2-0.de>
Date: Tue, 1 Sep 2026 11:11:15 +0200
Subject: [PATCH 3/3] fix: types

---
 src/index.ts  | 2 +-
 tsconfig.json | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/index.ts b/src/index.ts
index cf01c6f..29d1e21 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -30,7 +30,7 @@ export function mount(render: () => ShadowElement, parent: HTMLElement): () => v
   };
 }
 
-export function createComponent<T extends HTMLElement & { render: (this: T) => ShadowElement }>(
+export function createComponent<T extends HTMLElement>(
   name: string,
   Component: { new (): T },
 ): {
diff --git a/tsconfig.json b/tsconfig.json
index 28ce440..1b73525 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -30,7 +30,7 @@
     "paths": {} /* Specify a set of entries that re-map imports to additional lookup locations. */,
     // "rootDirs": [],                                   /* Allow multiple folders to be treated as one when resolving modules. */
     // "typeRoots": [],                                  /* Specify multiple folders that act like './node_modules/@types'. */
-    // "types": [],                                      /* Specify type package names to be included without being referenced in a source file. */
+    "types": ["mocha"],                                      /* Specify type package names to be included without being referenced in a source file. */
     // "allowUmdGlobalAccess": true,                     /* Allow accessing UMD globals from modules. */
     // "moduleSuffixes": [],                             /* List of file name suffixes to search when resolving a module. */
     // "allowImportingTsExtensions": true,               /* Allow imports to include TypeScript file extensions. Requires '--moduleResolution bundler' and either '--noEmit' or '--emitDeclarationOnly' to be set. */