diff --git a/.changeset/eighty-hounds-leave.md b/.changeset/eighty-hounds-leave.md
index 0a86c6c9..395f0aa9 100644
--- a/.changeset/eighty-hounds-leave.md
+++ b/.changeset/eighty-hounds-leave.md
@@ -2,4 +2,4 @@
 "@chialab/dna": patch
 ---
 
-cleanup component class typings
+Cleanup component class typings
diff --git a/src/Component.ts b/src/Component.ts
index 662190f3..2e9584bb 100644
--- a/src/Component.ts
+++ b/src/Component.ts
@@ -33,11 +33,6 @@ export type WithComponentProto<T> = T & {
  * We use this mixin to cast the Component class constructor in order to preserve type definition.
  */
 export interface ComponentMixin {
-    /**
-     * Type getter for component properties.
-     */
-    readonly __properties__: Props<this>;
-
     /**
      * Type getter for JSX properties.
      */
@@ -72,7 +67,7 @@ export interface ComponentMixin {
      * @param oldValue The previous value of the property.
      * @param newValue The new value for the property (undefined if removed).
      */
-    stateChangedCallback<P extends keyof this['__properties__']>(propertyName: P, oldValue: this[P] | undefined, newValue: this[P]): void;
+    stateChangedCallback<P extends keyof this>(propertyName: P, oldValue: this[P] | undefined, newValue: this[P]): void;
 
     /**
      * Invoked each time one of a Component's property is setted, removed, or changed.
@@ -81,7 +76,7 @@ export interface ComponentMixin {
      * @param oldValue The previous value of the property.
      * @param newValue The new value for the property (undefined if removed).
      */
-    propertyChangedCallback<P extends keyof this['__properties__']>(propertyName: P, oldValue: this[P] | undefined, newValue: this[P]): void;
+    propertyChangedCallback<P extends keyof this>(propertyName: P, oldValue: this[P] | undefined, newValue: this[P]): void;
 
     /**
      * Get the inner value of a property.
@@ -89,7 +84,7 @@ export interface ComponentMixin {
      * @param propertyName The name of the property to get.
      * @returns The inner value of the property.
      */
-    getInnerPropertyValue<P extends keyof this['__properties__']>(propertyName: P): this[P];
+    getInnerPropertyValue<P extends keyof this>(propertyName: P): this[P];
 
     /**
      * Set the inner value of a property.
@@ -97,7 +92,7 @@ export interface ComponentMixin {
      * @param propertyName The name of the property to get.
      * @param value The inner value to set.
      */
-    setInnerPropertyValue<P extends keyof this['__properties__']>(propertyName: P, value: this[P]): void;
+    setInnerPropertyValue<P extends keyof this>(propertyName: P, value: this[P]): void;
 
     /**
      * Observe a Component Property.
@@ -105,7 +100,7 @@ export interface ComponentMixin {
      * @param propertyName The name of the Property to observe
      * @param observer The callback function
      */
-    observe<P extends keyof this['__properties__']>(propertyName: P, observer: PropertyObserver<this[P]>): void;
+    observe<P extends keyof this>(propertyName: P, observer: PropertyObserver<this[P]>): void;
 
     /**
      * Unobserve a Component Property.
@@ -113,7 +108,7 @@ export interface ComponentMixin {
      * @param propertyName The name of the Property to unobserve
      * @param observer The callback function to remove
      */
-    unobserve<P extends keyof this['__properties__']>(propertyName: P, observer: PropertyObserver<this[P]>): void;
+    unobserve<P extends keyof this>(propertyName: P, observer: PropertyObserver<this[P]>): void;
 
     /**
      * Dispatch a custom Event.
@@ -334,11 +329,6 @@ function initSlotChildNodes<T extends HTMLElement, C extends ComponentInstance<T
  */
 const mixin = <T extends HTMLElement>(ctor: Constructor<T>) => {
     const Component = class Component extends (ctor as Constructor<HTMLElement>) {
-        /**
-         * Type getter for component properties.
-         */
-        declare readonly __properties__: Props<this>;
-
         /**
          * Type getter for JSX properties.
          */
@@ -544,7 +534,7 @@ const mixin = <T extends HTMLElement>(ctor: Constructor<T>) => {
          * @param oldValue The previous value of the property.
          * @param newValue The new value for the property (undefined if removed).
          */
-        stateChangedCallback<P extends keyof this['__properties__']>(propertyName: P, oldValue: this[P] | undefined, newValue: this[P]) {
+        stateChangedCallback<P extends keyof this>(propertyName: P, oldValue: this[P] | undefined, newValue: this[P]) {
             reflectPropertyToAttribute(this, propertyName, newValue);
         }
 
@@ -555,7 +545,7 @@ const mixin = <T extends HTMLElement>(ctor: Constructor<T>) => {
          * @param oldValue The previous value of the property.
          * @param newValue The new value for the property (undefined if removed).
          */
-        propertyChangedCallback<P extends keyof this['__properties__']>(propertyName: P, oldValue: this[P] | undefined, newValue: this[P]) {
+        propertyChangedCallback<P extends keyof this>(propertyName: P, oldValue: this[P] | undefined, newValue: this[P]) {
             reflectPropertyToAttribute(this, propertyName, newValue);
         }
 
@@ -565,7 +555,7 @@ const mixin = <T extends HTMLElement>(ctor: Constructor<T>) => {
          * @param propertyName The name of the property to get.
          * @returns The inner value of the property.
          */
-        getInnerPropertyValue<P extends keyof this['__properties__']>(propertyName: P): this[P] {
+        getInnerPropertyValue<P extends keyof this>(propertyName: P): this[P] {
             const property = getProperty(this, propertyName, true);
             return this[property.symbol as keyof this] as this[P];
         }
@@ -576,7 +566,7 @@ const mixin = <T extends HTMLElement>(ctor: Constructor<T>) => {
          * @param propertyName The name of the property to get.
          * @param value The inner value to set.
          */
-        setInnerPropertyValue<P extends keyof this['__properties__']>(propertyName: P, value: this[P]) {
+        setInnerPropertyValue<P extends keyof this>(propertyName: P, value: this[P]) {
             const property = getProperty(this, propertyName, true);
             this[property.symbol as keyof this] = value;
         }
@@ -587,7 +577,7 @@ const mixin = <T extends HTMLElement>(ctor: Constructor<T>) => {
          * @param propertyName The name of the Property to observe
          * @param observer The callback function
          */
-        observe<P extends keyof this['__properties__']>(propertyName: P, observer: PropertyObserver<this[P]>) {
+        observe<P extends keyof this>(propertyName: P, observer: PropertyObserver<this[P]>) {
             addObserver(this, propertyName, observer);
         }
 
@@ -597,7 +587,7 @@ const mixin = <T extends HTMLElement>(ctor: Constructor<T>) => {
          * @param propertyName The name of the Property to unobserve
          * @param observer The callback function to remove
          */
-        unobserve<P extends keyof this['__properties__']>(propertyName: P, observer: PropertyObserver<this[P]>) {
+        unobserve<P extends keyof this>(propertyName: P, observer: PropertyObserver<this[P]>) {
             removeObserver(this, propertyName, observer);
         }
 
diff --git a/src/JSX.ts b/src/JSX.ts
index d3f00af6..6d462178 100644
--- a/src/JSX.ts
+++ b/src/JSX.ts
@@ -30,10 +30,17 @@ export type GetCustomElementsProps<T extends keyof HTMLTagNameMap> = Exclude<{
             never;
 }[keyof JSXInternal.CustomElements], never>;
 
+/**
+ * Get HTML attributes by prototype.
+ */
+type ElementAttributes<T extends Element> = {
+    [K in keyof HTMLTagNameMap]: HTMLTagNameMap[K] extends T ? IntrinsicElementAttributes[K] : HTMLAttributes;
+}[keyof HTMLTagNameMap];
+
 /**
  * Get render attributes set.
  */
-export type AttributeProperties<T> = Omit<T, 'style' | 'class'>;
+export type AttributeProperties<T, A> = T & Omit<A, 'style' | 'class' | keyof T>;
 
 /**
  * Get render properties for keyed nodes.
@@ -97,7 +104,7 @@ export type VElement<T extends Element> = {
     type: T;
     key: unknown;
     namespace: string;
-    properties: Props<T> & AttributeProperties<HTMLAttributes> & KeyedProperties & TreeProperties & EventProperties & ElementProperties;
+    properties: AttributeProperties<Props<T>, ElementAttributes<T>> & KeyedProperties & TreeProperties & EventProperties & ElementProperties;
     children: Template[];
     [V_SYM]: true;
 };
@@ -109,7 +116,7 @@ export type VComponent<T extends ComponentConstructor> = {
     type: T;
     key?: unknown;
     namespace?: string;
-    properties: Props<InstanceType<T>> & AttributeProperties<HTMLAttributes> & KeyedProperties & TreeProperties & EventProperties & ElementProperties;
+    properties: AttributeProperties<Props<InstanceType<T>>, HTMLAttributes> & KeyedProperties & TreeProperties & EventProperties & ElementProperties;
     children: Template[];
     [V_SYM]: true;
 };
@@ -120,7 +127,7 @@ export type VComponent<T extends ComponentConstructor> = {
 export type VSlot = {
     type: 'slot';
     key: unknown;
-    properties: AttributeProperties<IntrinsicElementAttributes['slot']> & KeyedProperties & TreeProperties & EventProperties;
+    properties: AttributeProperties<Props<HTMLSlotElement>, IntrinsicElementAttributes['slot']> & KeyedProperties & TreeProperties & EventProperties;
     children: Template[];
     [V_SYM]: true;
 };
@@ -132,7 +139,7 @@ export type VTag<T extends keyof HTMLTagNameMap | keyof SVGTagNameMap> = {
     type: T;
     key: unknown;
     namespace: string;
-    properties: AttributeProperties<IntrinsicElementAttributes[T]> & KeyedProperties & TreeProperties & EventProperties & ElementProperties;
+    properties: AttributeProperties<T extends keyof HTMLTagNameMap ? Props<HTMLTagNameMap[T]> : T extends keyof SVGTagNameMap ? Props<SVGTagNameMap[T]> : Props<HTMLElement>, IntrinsicElementAttributes[T]> & KeyedProperties & TreeProperties & EventProperties & ElementProperties;
     children: Template[];
     [V_SYM]: true;
 };
@@ -221,10 +228,10 @@ export const isVTag = (target: VObject): target is VTag<keyof HTMLTagNameMap | k
 
 function h(tagOrComponent: typeof Fragment, properties?: null, ...children: Template[]): VFragment;
 function h<T extends FunctionComponent>(tagOrComponent: T, properties: Parameters<T>[0] & KeyedProperties & TreeProperties, ...children: Template[]): VFunction<T>;
-function h<T extends ComponentConstructor>(tagOrComponent: T, properties: Props<InstanceType<T>> & HTMLAttributes & KeyedProperties & TreeProperties & EventProperties & ElementProperties, ...children: Template[]): VComponent<T>;
-function h<T extends Element>(tagOrComponent: T, properties: Props<T> & HTMLAttributes & KeyedProperties & TreeProperties & EventProperties & ElementProperties, ...children: Template[]): VElement<T>;
-function h<T extends keyof HTMLTagNameMap>(tagOrComponent: T, properties: Props<T> & IntrinsicElementAttributes[T] & KeyedProperties & TreeProperties & EventProperties & ElementProperties, ...children: Template[]): VTag<T>;
-function h<T extends keyof SVGTagNameMap>(tagOrComponent: T, properties: Props<T> & IntrinsicElementAttributes[T] & KeyedProperties & TreeProperties & EventProperties & ElementProperties, ...children: Template[]): VTag<T>;
+function h<T extends ComponentConstructor>(tagOrComponent: T, properties: AttributeProperties<Props<InstanceType<T>>, HTMLAttributes> & KeyedProperties & TreeProperties & EventProperties & ElementProperties, ...children: Template[]): VComponent<T>;
+function h<T extends Element>(tagOrComponent: T, properties: AttributeProperties<Props<T>, ElementAttributes<T>> & KeyedProperties & TreeProperties & EventProperties & ElementProperties, ...children: Template[]): VElement<T>;
+function h<T extends keyof SVGTagNameMap>(tagOrComponent: T, properties: AttributeProperties<Props<SVGTagNameMap[T]>, IntrinsicElementAttributes[T]> & KeyedProperties & TreeProperties & EventProperties & ElementProperties, ...children: Template[]): VTag<T>;
+function h<T extends keyof HTMLTagNameMap>(tagOrComponent: T, properties: AttributeProperties<Props<HTMLTagNameMap[T]>, IntrinsicElementAttributes[T]> & KeyedProperties & TreeProperties & EventProperties & ElementProperties, ...children: Template[]): VTag<T>;
 /**
  * Function factory to use as JSX pragma.
  *
@@ -235,7 +242,7 @@ function h<T extends keyof SVGTagNameMap>(tagOrComponent: T, properties: Props<T
  */
 function h<T extends typeof Fragment | FunctionComponent | ComponentConstructor | Element | keyof HTMLTagNameMap | keyof SVGTagNameMap>(
     tagOrComponent: T,
-    properties: HTMLAttributes & KeyedProperties & TreeProperties & ElementProperties | null = null,
+    properties: AttributeProperties<Props<HTMLElement>, HTMLAttributes> & KeyedProperties & TreeProperties & ElementProperties | null = null,
     ...children: Template[]
 ) {
     const { children: propertiesChildren } = (properties || {}) as TreeProperties;
@@ -283,10 +290,10 @@ function h<T extends typeof Fragment | FunctionComponent | ComponentConstructor
 }
 
 function jsx<T extends FunctionComponent>(tagOrComponent: T, properties: Parameters<T>[0] & TreeProperties, key?: unknown): VFunction<T>;
-function jsx<T extends ComponentConstructor>(tagOrComponent: T, properties: Props<InstanceType<T>> & HTMLAttributes & TreeProperties & EventProperties & ElementProperties, key?: unknown): VComponent<T>;
-function jsx<T extends Element>(tagOrComponent: T, properties: Props<T> & HTMLAttributes & TreeProperties & EventProperties & ElementProperties, key?: unknown): VElement<T>;
-function jsx<T extends keyof HTMLTagNameMap>(tagOrComponent: T, properties: Props<T> & IntrinsicElementAttributes[T] & TreeProperties & EventProperties & ElementProperties, key?: unknown): VTag<T>;
-function jsx<T extends keyof SVGTagNameMap>(tagOrComponent: T, properties: Props<T> & IntrinsicElementAttributes[T] & TreeProperties & EventProperties & ElementProperties, key?: unknown): VTag<T>;
+function jsx<T extends ComponentConstructor>(tagOrComponent: T, properties: AttributeProperties<Props<InstanceType<T>>, HTMLAttributes> & TreeProperties & EventProperties & ElementProperties, key?: unknown): VComponent<T>;
+function jsx<T extends Element>(tagOrComponent: T, properties: AttributeProperties<Props<T>, ElementAttributes<T>> & TreeProperties & EventProperties & ElementProperties, key?: unknown): VElement<T>;
+function jsx<T extends keyof SVGTagNameMap>(tagOrComponent: T, properties: AttributeProperties<Props<SVGTagNameMap[T]>, IntrinsicElementAttributes[T]> & TreeProperties & EventProperties & ElementProperties, key?: unknown): VTag<T>;
+function jsx<T extends keyof HTMLTagNameMap>(tagOrComponent: T, properties: AttributeProperties<Props<HTMLTagNameMap[T]>, IntrinsicElementAttributes[T]> & TreeProperties & EventProperties & ElementProperties, key?: unknown): VTag<T>;
 /**
  * Function factory to use as JSX pragma.
  *
@@ -330,11 +337,11 @@ export namespace JSXInternal {
         [K in keyof CustomElements]:
             'extends' extends keyof JSXInternal.CustomElements[K] ?
                 never :
-                Props<CustomElements[K]> & AttributeProperties<HTMLAttributes> & KeyedProperties & TreeProperties & EventProperties & ElementProperties;
+                AttributeProperties<Props<CustomElements[K]>, HTMLAttributes> & KeyedProperties & TreeProperties & EventProperties & ElementProperties;
     } & {
-        [K in keyof HTMLTagNameMap]: (({ is?: never } & Props<HTMLTagNameMap[K]>) | GetCustomElementsProps<K>) & AttributeProperties<IntrinsicElementAttributes[K]> & KeyedProperties & TreeProperties & EventProperties & ElementProperties;
+        [K in keyof HTMLTagNameMap]: AttributeProperties<(({ is?: never } & Props<HTMLTagNameMap[K]>) | GetCustomElementsProps<K>), IntrinsicElementAttributes[K]> & KeyedProperties & TreeProperties & EventProperties & ElementProperties;
     } & {
-        [K in keyof SVGTagNameMap]: Props<SVGTagNameMap[K]> & AttributeProperties<IntrinsicElementAttributes[K]> & KeyedProperties & TreeProperties & EventProperties & ElementProperties;
+        [K in keyof SVGTagNameMap]: AttributeProperties<Props<SVGTagNameMap[K]>, IntrinsicElementAttributes[K]> & KeyedProperties & TreeProperties & EventProperties & ElementProperties;
     };
 }
 
diff --git a/src/events.ts b/src/events.ts
index f1b6eb95..63cfd6c2 100644
--- a/src/events.ts
+++ b/src/events.ts
@@ -1,5 +1,5 @@
 import { type ComponentInstance, type ComponentConstructor } from './Component';
-import { type MethodsOf } from './property';
+import { type Methods } from './property';
 import { type Constructor, type ClassElement, HTMLElementConstructor, isElement, isEvent, matchesImpl, createEventImpl, hasOwnProperty, getOwnPropertyDescriptor, getPrototypeOf } from './helpers';
 
 /**
@@ -452,7 +452,7 @@ export const defineListeners = <T extends ComponentInstance>(prototype: T) => {
  * @param methodKey The method name.
  * @returns The property descriptor.
  */
-export const createListener = <T extends ComponentInstance, P extends MethodsOf<T>>(
+export const createListener = <T extends ComponentInstance, P extends keyof Methods<T>>(
     targetOrClassElement: T,
     eventName: string,
     target: EventTarget | null,
@@ -492,7 +492,7 @@ function listen(eventName: string, target: EventTarget, options?: AddEventListen
  * @returns The decorator initializer.
  */
 function listen(eventName: string, target?: string | EventTarget | AddEventListenerOptions, options?: AddEventListenerOptions) {
-    return <T extends ComponentInstance, P extends MethodsOf<T>>(
+    return <T extends ComponentInstance, P extends keyof Methods<T>>(
         targetOrClassElement: T,
         methodKey: P
     ) => createListener(
diff --git a/src/property.ts b/src/property.ts
index bcccb84c..72af3c1c 100644
--- a/src/property.ts
+++ b/src/property.ts
@@ -19,7 +19,9 @@ const WATCHED_SYMBOL: unique symbol = Symbol();
 /**
  * Checks types equality.
  */
-type IfEquals<X, Y, A, B> = X  extends Y ? Y extends X ? A : B : B;
+type IfEquals<X, Y, A, B> =
+    (<G>() => G extends X ? 1 : 2) extends
+    (<G>() => G extends Y ? 1 : 2) ? A : B;
 
 /**
  * Check if a property is writable.
@@ -29,39 +31,39 @@ type IfWritable<T, K extends keyof T, A, B> = IfEquals<{ [Q in K]: T[K] }, { -re
 /**
  * Check if a property is a method.
  */
-type IfMethod<T, K extends keyof T, A, B> = T[K] extends (...args: never) => unknown ? A : B;
+type IfMethod<T, K extends keyof T, A, B> = T[K] extends Function ? A : B;
 
 /**
  * Exclude component mixin properties.
  */
-type NonReservedKeys<T> = Exclude<keyof T, keyof ComponentMixin | keyof Element | keyof ElementCSSInlineStyle>;
+type NonReservedKeys<T> = Exclude<keyof T, keyof ComponentMixin | Exclude<keyof Element, 'id' | 'className'> | keyof ElementCSSInlineStyle>;
 
 /**
- * Get all defined properties of a component.
+ * Pick defined properties of a component.
  */
 export type Props<T> = {
     [K in NonReservedKeys<T> as IfMethod<T, K, never, IfWritable<T, K, K, never>>]?: T[K];
 };
 
 /**
- * Get all methods of a class.
+ * Pick methods of a class.
  */
-export type MethodsOf<T> = {
-    [K in keyof T]: T[K] extends Function ? (T[K] extends undefined ? never : K) : never;
-}[keyof T];
+export type Methods<T> = {
+    [K in NonReservedKeys<T> as IfMethod<T, K, K, never>]: T[K];
+};
 
 /**
  * Retrieve properties declarations of a Component.
  */
 export type PropertiesOf<T extends ComponentInstance> = {
-    [P in keyof T['__properties__']]: Property<T, P>;
+    [P in keyof T]: Property<T, P>;
 };
 
 /**
  * Retrieve properties declarations of a Component.
  */
 export type ObserversOf<T extends ComponentInstance> = {
-    [P in keyof T['__properties__']]: PropertyObserver<T[P]>[];
+    [P in keyof T]: PropertyObserver<T[P]>[];
 };
 
 /**
@@ -180,7 +182,7 @@ export type PropertyConfig<TypeConstructorHint extends Constructor<unknown> = Co
 /**
  * A property instance.
  */
-export type Property<T extends ComponentInstance, P extends keyof T['__properties__']> = PropertyDescriptor & {
+export type Property<T extends ComponentInstance, P extends keyof T> = PropertyDescriptor & {
     /**
      * The property name of the field.
      */
@@ -287,7 +289,7 @@ export const getProperties = <T extends ComponentInstance>(prototype: WithProper
  * @returns The property declaration.
  * @throws If the property is not defined and `failIfMissing` is `true`.
  */
-export const getProperty = <T extends ComponentInstance, P extends keyof T['__properties__']>(prototype: T, propertyKey: P, failIfMissing = false) => {
+export const getProperty = <T extends ComponentInstance, P extends keyof T>(prototype: T, propertyKey: P, failIfMissing = false) => {
     const property = getProperties(prototype)[propertyKey];
     if (failIfMissing && !property) {
         throw new Error(`Missing property ${String(propertyKey)}`);
@@ -300,7 +302,7 @@ export const getProperty = <T extends ComponentInstance, P extends keyof T['__pr
  * @param declaration The property declaration.
  * @returns A list of constructors.
  */
-const extractTypes = <T extends ComponentInstance, P extends keyof T['__properties__']>(declaration: PropertyDeclaration<Constructor<T[P]>>) => {
+const extractTypes = <T extends ComponentInstance, P extends keyof T>(declaration: PropertyDeclaration<Constructor<T[P]>>) => {
     const type = declaration.type;
     if (!type) {
         return [];
@@ -329,7 +331,7 @@ export const getWatched = <T extends ComponentInstance>(element: WithProperties<
  * @param isStatic The property definition is static.
  * @returns The final descriptor.
  */
-export const defineProperty = <T extends ComponentInstance, P extends keyof T['__properties__']>(prototype: T, propertyKey: P, declaration: PropertyDeclaration<Constructor<T[P]>>, symbolKey: symbol, isStatic = false): PropertyDescriptor => {
+export const defineProperty = <T extends ComponentInstance, P extends keyof T>(prototype: T, propertyKey: P, declaration: PropertyDeclaration<Constructor<T[P]>>, symbolKey: symbol, isStatic = false): PropertyDescriptor => {
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     const symbol: unique symbol = symbolKey as any;
     const hasAttribute = declaration.attribute || (declaration.attribute == null ? !declaration.state : false);
@@ -504,19 +506,19 @@ export const defineProperties = <T extends ComponentInstance>(prototype: T) => {
         const propertiesDescriptor = getOwnPropertyDescriptor(ctr, 'properties');
         if (propertiesDescriptor) {
             const descriptorProperties = (propertiesDescriptor.get ? (propertiesDescriptor.get.call(constructor) || {}) : propertiesDescriptor.value) as {
-                [P in keyof T['__properties__']]: PropertyConfig<Constructor<T[P]>>;
+                [P in keyof T]: PropertyConfig<Constructor<T[P]>>;
             };
             for (const propertyKey in descriptorProperties) {
                 if (propertyKey in handled) {
                     continue;
                 }
-                const config = descriptorProperties[propertyKey as keyof T['__properties__']];
-                const declaration = (typeof config === 'function' || isArray(config) ? { type: config } : config) as PropertyDeclaration<Constructor<T[keyof T['__properties__']]>>;
+                const config = descriptorProperties[propertyKey as keyof T];
+                const declaration = (typeof config === 'function' || isArray(config) ? { type: config } : config) as PropertyDeclaration<Constructor<T[keyof T]>>;
                 // eslint-disable-next-line @typescript-eslint/no-explicit-any
                 const symbol: unique symbol = (declaration.symbol as any) || Symbol(propertyKey as string);
                 defineProperty(
                     prototype,
-                    propertyKey as keyof T['__properties__'],
+                    propertyKey as keyof T,
                     declaration,
                     symbol,
                     true
@@ -538,7 +540,7 @@ export const defineProperties = <T extends ComponentInstance>(prototype: T) => {
 export const getPropertyForAttribute = <T extends ComponentInstance>(prototype: T, attributeName: string) => {
     const properties = getProperties(prototype);
     for (const propertyKey in properties) {
-        const property = properties[propertyKey as keyof T['__properties__']];
+        const property = properties[propertyKey as keyof T];
         if (property.attribute === attributeName) {
             return property;
         }
@@ -553,7 +555,7 @@ export const getPropertyForAttribute = <T extends ComponentInstance>(prototype:
  * @param propertyName The name of the changed property.
  * @param newValue The new value for the property (undefined if removed).
  */
-export const reflectPropertyToAttribute = <T extends ComponentInstance, P extends keyof T['__properties__']>(element: T, propertyName: P, newValue: T[P]) => {
+export const reflectPropertyToAttribute = <T extends ComponentInstance, P extends keyof T>(element: T, propertyName: P, newValue: T[P]) => {
     const property = getProperty(element, propertyName, true);
     const { attribute, toAttribute } = property;
     if (attribute && toAttribute) {
@@ -610,7 +612,7 @@ const assignFromDescriptor = (declaration: PropertyDeclaration, descriptor: Prop
  * @returns The property descriptor.
  */
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-export const createProperty = <T extends ComponentInstance, P extends keyof T['__properties__']>(targetOrClassElement: T, declaration: PropertyDeclaration<Constructor<T[P]>>, propertyKey?: P, descriptor?: PropertyDeclaration<Constructor<T[P]>>): any => {
+export const createProperty = <T extends ComponentInstance, P extends keyof T>(targetOrClassElement: T, declaration: PropertyDeclaration<Constructor<T[P]>>, propertyKey?: P, descriptor?: PropertyDeclaration<Constructor<T[P]>>): any => {
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     const symbol: unique symbol = declaration.symbol || Symbol(propertyKey as string) as any;
     if (propertyKey !== undefined) {
@@ -662,7 +664,7 @@ export const createProperty = <T extends ComponentInstance, P extends keyof T['_
  * @returns The observer descriptor.
  */
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-export const createObserver = <T extends ComponentInstance, P extends keyof T['__properties__'], M extends MethodsOf<T>>(targetOrClassElement: T, propertyKey: P, methodKey?: M): any => {
+export const createObserver = <T extends ComponentInstance, P extends keyof T, M extends keyof Methods<T>>(targetOrClassElement: T, propertyKey: P, methodKey?: M): any => {
     if (methodKey !== undefined) {
         addObserver(targetOrClassElement, propertyKey, targetOrClassElement[methodKey] as unknown as PropertyObserver<T[P]>);
         return;
@@ -705,7 +707,7 @@ export const getObservers = <T extends ComponentInstance>(element: WithPropertie
  * @returns A list of observers.
  * @throws If the property is not defined.
  */
-export const getPropertyObservers = <T extends ComponentInstance, P extends keyof T['__properties__']>(element: T, propertyName: P) => {
+export const getPropertyObservers = <T extends ComponentInstance, P extends keyof T>(element: T, propertyName: P) => {
     if (!getProperty(element, propertyName)) {
         throw new Error(`Missing property ${String(propertyName)}`);
     }
@@ -719,7 +721,7 @@ export const getPropertyObservers = <T extends ComponentInstance, P extends keyo
  * @param propertyName The name of the property to watch.
  * @param observer The observer function to add.
  */
-export const addObserver = <T extends ComponentInstance, P extends keyof T['__properties__']>(element: T, propertyName: P, observer: PropertyObserver<T[P]>) => {
+export const addObserver = <T extends ComponentInstance, P extends keyof T>(element: T, propertyName: P, observer: PropertyObserver<T[P]>) => {
     getPropertyObservers(element, propertyName).push(observer);
 };
 
@@ -729,7 +731,7 @@ export const addObserver = <T extends ComponentInstance, P extends keyof T['__pr
  * @param propertyName The name of the watched property.
  * @param observer The observer function to remove.
  */
-export const removeObserver = <T extends ComponentInstance, P extends keyof T['__properties__']>(element: T, propertyName: P, observer: PropertyObserver<T[P]>) => {
+export const removeObserver = <T extends ComponentInstance, P extends keyof T>(element: T, propertyName: P, observer: PropertyObserver<T[P]>) => {
     const observers = getPropertyObservers(element, propertyName);
     const io = observers.indexOf(observer);
     if (io !== -1) {
@@ -743,7 +745,7 @@ export const removeObserver = <T extends ComponentInstance, P extends keyof T['_
  * @returns The decorator initializer.
  */
 export function property<TypeConstructorHint extends Constructor<unknown> = Constructor<unknown>>(declaration: PropertyDeclaration<TypeConstructorHint> = {}) {
-    return <T extends ComponentInstance, P extends keyof T['__properties__']>(
+    return <T extends ComponentInstance, P extends keyof T>(
         targetOrClassElement: T,
         propertyKey?: P,
         descriptor?: PropertyDeclaration<Constructor<T[P]>>
@@ -756,7 +758,7 @@ export function property<TypeConstructorHint extends Constructor<unknown> = Cons
  * @returns The decorator initializer.
  */
 export function state<TypeConstructorHint extends Constructor<unknown> = Constructor<unknown>>(declaration: PropertyDeclaration<TypeConstructorHint> = {}) {
-    return <T extends ComponentInstance, P extends keyof T['__properties__']>(
+    return <T extends ComponentInstance, P extends keyof T>(
         targetOrClassElement: T,
         propertyKey?: P,
         descriptor?: PropertyDeclaration<Constructor<T[P]>>
@@ -770,7 +772,7 @@ export function state<TypeConstructorHint extends Constructor<unknown> = Constru
  * @returns The decorator initializer.
  */
 export function observe(propertyKey: string): Function {
-    return <T extends ComponentInstance, P extends MethodsOf<T>>(
+    return <T extends ComponentInstance, P extends keyof Methods<T>>(
         targetOrClassElement: T,
         methodKey?: P
     ) => createObserver(targetOrClassElement, propertyKey as keyof PropertiesOf<T>, methodKey);
diff --git a/test/typings/Component.ts b/test/typings/Component.ts
index 4fb47187..b8445b0d 100644
--- a/test/typings/Component.ts
+++ b/test/typings/Component.ts
@@ -1,9 +1,13 @@
 // eslint-disable-next-line import/no-unresolved
-import { window, Component, customElement, extend } from '@chialab/dna';
+import { window, Component, customElement, extend, property } from '@chialab/dna';
 
 @customElement('x-test')
 export class TestElement extends Component {
-    readonly active?: boolean;
+    active?: boolean;
+
+    @property({
+        type: Number,
+    }) width: number = 2;
 
     get computed(): string {
         return this.getInnerPropertyValue('computed');