p-elements-core 1.2.30 → 1.2.32-rc-10

package/src/custom-element.ts

@@ -1,7 +1,12 @@
-import { PropertyInfo } from "./decorators/property";
-import { replaceApplyToCssVars } from "./helpers/css";
+import {
+  type PropertyOptionsWithName,
+  isSettingAttribute,
+  processPendingUpdates,
+} from "./decorators/property";
+
 import { ICustomElementController } from "./custom-element-controller";
 import { Projector, VNode } from "./maquette/interfaces";
+import { replaceApplyToCssVars } from "./helpers/css";
 
 export type ElementProjectorMode = "append" | "merge" | "replace";
 
@@ -10,22 +15,34 @@ declare var HTMLElement: {
   new (param?): HTMLElement;
 };
 
+interface ComponentConstructor {
+  readonly css?: string;
+  readonly formAssociated?: boolean;
+  readonly delegatesFocus?: boolean;
+  _propertyInfo?: Map<string, PropertyOptionsWithName>;
+  observedAttributes?: string[];
+}
+
 const documentAdoptedStyleSheets: number[] = [];
 
 export abstract class CustomElement extends HTMLElement {
-  constructor(self?: any) {
-    super();
-    this.#init();
-    this.#callInitFunction();
-    return self;
-  }
-
-  #properties: PropertyInfo[];
+  /**
+   * Map of reactive property metadata, indexed by property name
+   * Used by @property decorator and attributeChangedCallback
+   *
+   * @static
+   * @type {Map<string, PropertyOptionsWithName>}
+   */
+  static readonly _propertyInfo: Map<string, PropertyOptionsWithName> =
+    new Map();
 
   #projector: Projector;
 
   #projectorMode: ElementProjectorMode;
 
+  /** Whether the component is currently connected to the DOM */
+  #connected = false;
+
   #cssText: string;
 
   #cssSheet: CSSStyleSheet;
@@ -34,159 +51,262 @@ export abstract class CustomElement extends HTMLElement {
 
   #isSheetAdopted = false;
 
-  #useShadowRoot;
+  #useShadowRoot = false;
+
+  #delegatesFocus = false;
+
+  #isFirstRenderStart = true;
+
+  #isFirstRenderDone = true;
 
-  #delegatesFocus;
+  /**
+   * Form API internals for form-associated custom elements
+   *
+   * @type {ElementInternals | null}
+   * @description Provides access to form APIs when formAssociated is true.
+   * Available for form-associated custom elements to interact with forms.
+   * Null if element is not form-associated.
+   */
+  #internals: ElementInternals | null = null;
 
-  #internals: ElementInternals;
+  #internalsObjectUntilAttached: object | null;
 
-  #controllers :any[] = [];
+  readonly #controllers: ICustomElementController[] = [];
 
-  #connected = false;
+  /** Promise that resolves when the current update is complete */
+  #updatePromise: Promise<void> | null = null;
+
+  /** Resolve function for the current update promise */
+  #updateResolve: (() => void) | null = null;
+
+  constructor(self?: any) {
+    super();
 
-  #canReflect = false;
+    const warn = (fn: string) => {
+      console.warn(
+        `ElementInternals.${fn} called before element was connected. Call will be ignored.`,
+      );
+    };
+    this.#internalsObjectUntilAttached = {
+      setValidity: (
+        _flags?: ValidityStateFlags,
+        _message?: string,
+        _anchor?: HTMLElement,
+      ) => {
+        warn("setValidity");
+      },
+      reportValidity: () => {
+        warn("reportValidity");
+        return false;
+      },
+      checkValidity: () => {
+        warn("checkValidity");
+        return true;
+      },
+      setFormValue: (
+        _value: File | string | FormData | null,
+        _state?: File | string | FormData | null,
+      ) => {
+        warn("setFormValue");
+      },
+    };
 
-  get _canReflect(): boolean {
-    return this.#canReflect;
+    this.#init();
+    this.#callInitFunction();
+    return self;
   }
 
-  get properties() : readonly PropertyInfo[] {
-    return this.#properties;
-  } 
+  /**
+   * Whether the component is currently connected to the DOM.
+   *
+   * @returns {boolean} True if connected, false otherwise
+   */
+  get isConnected(): boolean {
+    return this.#connected;
+  }
 
-  addController(controller: ICustomElementController) {
-    this.#controllers.push(controller);
-    if (this.#connected && controller.connected) {
-      controller.connected();
+  /**
+   * Array of reactive property metadata for the component, indexed by property name.
+   * Used by @property decorator and attributeChangedCallback
+   *
+   * @returns {readonly PropertyOptionsWithName[]} Array of property metadata
+   */
+  get properties(): readonly PropertyOptionsWithName[] {
+    const ctor = this.constructor as ComponentConstructor;
+    if (!ctor._propertyInfo) {
+      return [];
     }
+    return Array.from(ctor._propertyInfo.values());
   }
 
-  #callInitFunction() {
-    if (typeof (this as any).init === "function") {
-        (this as any).init();
-        this.#controllers.forEach((controller) => {
-          controller?.init();
-      });
+  /**
+   * Promise that resolves when the component has finished updating
+   * and rendering to the DOM.
+   *
+   * @returns {Promise<void>} A promise that resolves after the next render
+   *
+   * @example
+   * ```typescript
+   * component.name = 'new value';
+   * await component.updateComplete;
+   * // DOM is now updated
+   * ```
+   */
+  get updateComplete(): Promise<void> {
+    if (!this.#updatePromise) {
+      return Promise.resolve();
     }
+    return this.#updatePromise;
   }
 
-  #init() {
-    this.#initProperties();
-    const staticProjectorMode = (this.constructor as any).projectorMode;
-    this.#projectorMode = staticProjectorMode ? staticProjectorMode : "append";
-    const isFormAssociated = (this.constructor as any).formAssociated;
-    const delegatesFocus = (this.constructor as any).delegatesFocus;
-    this.#delegatesFocus = delegatesFocus;
-    if (isFormAssociated) {
-      this.#internals = this.attachInternals();
+  /**
+   * Gets the ElementInternals for form-associated custom elements.
+   * Initializes internals on first access if the component is form-associated.
+   *
+   * @returns {ElementInternals | null} The element internals or null if not form-associated
+   */
+  get internals(): ElementInternals | null {
+    if (
+      !this.#connected &&
+      typeof this.#internalsObjectUntilAttached === "object"
+    ) {
+      return this.#internalsObjectUntilAttached as any;
     }
-    const css = (this.constructor as any).style;
-
-    if (css) {
-      this.#useShadowRoot = true;
-      this.#projectorMode = "replace";
-      if (!this.shadowRoot) {
-        this.attachShadow({ mode: "open", delegatesFocus: this.#delegatesFocus });
+    const ctor = this.constructor as ComponentConstructor;
+    if (this.#internals === null && ctor.formAssociated) {
+      const tempInternals = this.#internalsObjectUntilAttached;
+      this.#internalsObjectUntilAttached = null;
+      this.#internals = this.attachInternals();
+      for (const key in tempInternals) {
+        if (typeof (this.#internals as any)[key] !== "function") {
+          (this.#internals as any)[key] = (tempInternals as any)[key];
+        }
       }
-      this.#initStylesheet(css);
-      const div = document.createElement("div");
-      this.shadowRoot.appendChild(div);
-      requestAnimationFrame(() => {
-        this.createProjector(div, (this as any).render);
-      });
-      window.addEventListener("updatecssapply", () => {
-        this.#polyfillCssApply();
-      });
     }
-    
+    return this.#internals;
   }
 
-  #reflectProperties() {
-    this.#properties.filter((p) => p.reflect).forEach((p) => {
-      if (p.type === "string" && this[p.name] !== undefined && this[p.name] !== null) {
-        this.setAttribute(p.attribute, this[p.name]);
-      } else if (p.type === "number" && this[p.name] !== undefined && this[p.name] !== null) {
-        this.setAttribute(p.attribute, this[p.name].toString());
-      } else if (p.type === "boolean" && this[p.name] === true) {
-        if (this[p.name] === true && !this.hasAttribute(p.attribute)) {
-          this.setAttribute(p.attribute, "");
-        }
-      }  else if (p.type === "boolean" && this[p.name] === false) {
-        if (this.hasAttribute(p.attribute)) {
-          this.removeAttribute(p.attribute);
-        }
-      } else if (p.type === "object" && this[p.name] !== undefined && this[p.name] !== null) {
-        if (p.converter) {
-          this.setAttribute(p.attribute, p.converter.toAttribute(this[p.name]));
-        } else {
-          this.setAttribute(p.attribute, JSON.stringify(this[p.name]));
-        }
-      }
-    });
+  protected set internals(elementInternals: ElementInternals) {
+    this.#internals = elementInternals;
   }
 
-  #initProperties = () => {
-    const propertyNames = (this.constructor as any).__properties__;
-    this.#properties = [];
-    if (!propertyNames) {
-      return;
+  /**
+   * Request an update and re-render of the component.
+   * Creates a promise that resolves when the update is complete.
+   *
+   * @returns {Promise<void>} A promise that resolves after rendering
+   *
+   * @example
+   * ```typescript
+   * await component.requestUpdate();
+   * // DOM is now updated
+   * ```
+   */
+  requestUpdate(): Promise<void> {
+    if (!this.#updatePromise) {
+      this.#updatePromise = new Promise((resolve) => {
+        this.#updateResolve = resolve;
+      });
+      this.scheduleRender();
     }
-    this.#properties = propertyNames.map((propertyName) => {
-      return { ...this[`__property_${propertyName}__`], name: propertyName };
-    });
-  };
-
-  get #hasAdoptedStyleSheetsSupport(): boolean {
-    return (
-      Array.isArray(document.adoptedStyleSheets) &&
-      "replace" in CSSStyleSheet.prototype
-    );
+    return this.#updatePromise;
   }
 
-  #polyfillCssApply(): string {
-    let style = replaceApplyToCssVars(this.#cssText);
-    if (this.#cssText !== style) {
-      this.#cssText = style;
-      if (this.#hasAdoptedStyleSheetsSupport && this.#cssSheet) {
-        this.#cssSheet.replaceSync(style);
-      } else if (!this.#hasAdoptedStyleSheetsSupport) {
-        if (this.#linkElement) {
-          URL.revokeObjectURL(this.#linkElement.href);
-        }
-        this.#linkElement.href = URL.createObjectURL(
-          new Blob([style], { type: "text/css" })
-        );
-      }
+  addController(controller: ICustomElementController) {
+    this.#controllers.push(controller);
+    if (this.#connected && controller.connected) {
+      controller.connected();
     }
-    return style;
   }
 
-  #initStylesheet(style: string) {
-    this.#cssText = style;
-    if (this.#useShadowRoot && this.shadowRoot) {
-      this.addStylesheetToRootNode(style, this.shadowRoot);
-    } else if (!this.#useShadowRoot) {
-      this.addStylesheetToRootNode(style, document);
-    }
+  scheduleRender(): void {
+    this.#projector?.scheduleRender();
   }
 
-  #getHashCode(s: string) {
-    for (var i = 0, h = 0; i < s.length; i++)
-      h = (Math.imul(31, h) + s.charCodeAt(i)) | 0;
-    return h;
+  /**
+   * Immediately render the component to its shadow DOM
+   * Calls the abstract render() method and updates DOM via uhtml
+   * Re-injects style elements if necessary
+   *
+   * @public
+   */
+  renderNow(): void {
+    if (this.#useShadowRoot && !this.shadowRoot) {
+      return;
+    }
+
+    // Create update promise if it doesn't exist (for synchronous renderNow calls)
+    if (!this.#updatePromise) {
+      this.#updatePromise = new Promise((resolve) => {
+        this.#updateResolve = resolve;
+      });
+    }
+    this.#projector?.renderNow();
+
+    // Call updated() lifecycle hook after DOM updates are complete
+    this.updated("", null, null);
+
+    // Resolve the update promise after rendering and updated() hook
+    if (this.#updateResolve) {
+      const resolve = this.#updateResolve;
+      this.#updateResolve = null;
+      this.#updatePromise = null;
+
+      // Resolve on next microtask to ensure DOM updates are complete
+      resolve();
+    }
   }
 
-  protected get internals() {
-    return this.#internals;
+  /**
+   * Lifecycle hook called when a property is updated
+   * Override to perform side effects when properties change
+   *
+   * @param {string} _propertyName - The name of the updated property
+   * @param {any} _oldValue - The previous property value
+   * @param {any} _newValue - The new property value
+   *
+   * @virtual
+   * @example
+   * ```typescript
+   * updated(propertyName: string, oldValue: any, newValue: any) {
+   *   if (propertyName === 'count') {
+   *     console.log(`Count changed from ${oldValue} to ${newValue}`);
+   *   }
+   * }
+   * ```
+   */
+  updated(_propertyName: string, _oldValue: any, _newValue: any): void {
+    // Default: no-op. Override in subclass to perform side effects.
   }
 
-  protected set internals(elementInternals: ElementInternals) {
-    this.#internals = elementInternals;
+  /**
+   * Determine if component should update when a property changes
+   * Override to add custom logic for skipping updates
+   *
+   * @param {string} _name - The name of the property that changed
+   * @param {any} _oldValue - The previous property value
+   * @param {any} _newValue - The new property value
+   * @returns {boolean} True if the component should update, false otherwise
+   *
+   * @virtual
+   * @default true
+   * @example
+   * ```typescript
+   * shouldUpdate(name: string, oldValue: any, newValue: any): boolean {
+   *   if (name === 'internal') {
+   *     return false; // Skip updates for 'internal' property
+   *   }
+   *   return true;
+   * }
+   * ```
+   */
+  shouldUpdate(_name: string, _oldValue: any, _newValue: any): boolean {
+    return true;
   }
 
   protected addStylesheetToRootNode(
     style: string,
-    rootNode: ShadowRoot | Document
+    rootNode: ShadowRoot | Document,
   ) {
     if (this.#hasAdoptedStyleSheetsSupport) {
       if (!this.#cssSheet) {
@@ -216,7 +336,7 @@ export abstract class CustomElement extends HTMLElement {
       this.#linkElement.rel = "stylesheet";
       style = this.#polyfillCssApply();
       this.#linkElement.href = URL.createObjectURL(
-        new Blob([style], { type: "text/css" })
+        new Blob([style], { type: "text/css" }),
       );
       if (rootNode instanceof Document) {
         const styleHash = this.#getHashCode(style);
@@ -236,35 +356,44 @@ export abstract class CustomElement extends HTMLElement {
   ): DocumentFragment {
     const templateElement = document.createElement("template");
     templateElement.innerHTML = template;
-    const fragmet = document.createDocumentFragment();
-    fragmet.appendChild(templateElement.content);
-    const styleElement = fragmet.querySelector("style");
+    const fragment = document.createDocumentFragment();
+    fragment.appendChild(templateElement.content);
+    const styleElement = fragment.querySelector("style");
     if (useShadowRoot) {
       this.#useShadowRoot = true;
       if (!this.shadowRoot) {
-        this.attachShadow({ mode: "open", delegatesFocus: this.#delegatesFocus });
+        this.attachShadow({
+          mode: "open",
+          delegatesFocus: this.#delegatesFocus,
+        });
       }
     }
-    this.#initStylesheet(styleElement.textContent);
-    styleElement.remove();
+    if (styleElement) {
+      this.#initStylesheet(styleElement.textContent);
+      styleElement.remove();
+    }
     window.addEventListener("updatecssapply", () => {
       this.#polyfillCssApply();
     });
-   
-    return fragmet;
+
+    return fragment;
   }
 
   protected adoptStyle(
     root: Document | ShadowRoot,
-    css: string
+    css: string,
   ): string | void {
     this.addStylesheetToRootNode(css, root);
   }
 
-  protected createProjector(
+  protected async createProjector(
     element: Element,
-    render: () => VNode
+    render: () => VNode,
   ): Promise<Projector> {
+    return this.#createProjector(element, render);
+  }
+
+  #createProjector(element: Element, render: () => VNode): Promise<Projector> {
     return new Promise<Projector>((resolve, reject) => {
       let projector: Projector;
       const mode = this.#projectorMode ? this.#projectorMode : "append";
@@ -274,12 +403,10 @@ export abstract class CustomElement extends HTMLElement {
             if (eventName === "renderStart" || eventName === "renderDone") {
               this.#invokeRenderLifecycleFn(eventName);
             }
-          }
+          },
         });
         projector[mode](element, render.bind(this));
         this.#projector = projector;
-        this.#canReflect = true;
-        this.#reflectProperties();
         projector.renderNow();
         resolve(projector);
         this.dispatchEvent(new CustomEvent("firstRender", {}));
@@ -287,74 +414,230 @@ export abstract class CustomElement extends HTMLElement {
     });
   }
 
-  scheduleRender(): void {
-    this.#projector?.scheduleRender();
-  }
-
-  renderNow(): void {
-    this.#projector?.renderNow();
+  #callInitFunction() {
+    if (typeof (this as any).init === "function") {
+      (this as any).init();
+      this.#controllers.forEach((controller) => {
+        if (controller?.init) {
+          controller.init();
+        }
+      });
+    }
   }
 
-  connectedCallback() {
-    this.#connected = true;
+  #invokeRenderLifecycleFn(eventName: string) {
+    if (this[eventName]) {
+      this[eventName](
+        eventName === "renderStart"
+          ? this.#isFirstRenderStart
+          : this.#isFirstRenderDone,
+      );
+    }
+    const controllerEventName = `host${eventName.charAt(0).toUpperCase()}${eventName.slice(1)}`;
     this.#controllers.forEach((controller) => {
-      controller?.connected();
+      if (controller[controllerEventName]) {
+        controller[controllerEventName](
+          eventName === "renderStart"
+            ? this.#isFirstRenderStart
+            : this.#isFirstRenderDone,
+        );
+      }
     });
+    if (eventName === "renderStart") {
+      this.#isFirstRenderStart = false;
+    } else {
+      this.#isFirstRenderDone = false;
+    }
   }
 
-  disconnectedCallback() {
-    this.#connected = false;
-    this.#controllers.forEach((controller) => {
-      controller?.disconnected();
-    });
+  /**
+   * Safe upgrade of properties that may have been set before the element was upgraded.
+   * This captures the value, deletes the own property, and resets it to trigger the setter.
+   * @private
+   */
+  #upgradeProperties() {
+    const ctor = this.constructor as ComponentConstructor;
+    if (ctor._propertyInfo) {
+      const properties = Array.from(ctor._propertyInfo.entries());
+      let i = 0;
+      const propertiesLength = properties.length;
+      while (i < propertiesLength) {
+        const [prop] = properties[i];
+        if (Object.hasOwn(this, prop)) {
+          const value = (this as any)[prop];
+          delete (this as any)[prop];
+          (this as any)[prop] = value;
+        }
+        i = i + 1;
+      }
+    }
   }
 
-  attributeChangedCallback(
-    name: string,
-    oldValue: string | null,
-    newValue: string | null
-  ) {
-    const prop = this.#properties.find((p) => p.attribute === name);
-    if (!prop) {
-      return;
+  #init() {
+    const staticProjectorMode = (this.constructor as any).projectorMode;
+    this.#projectorMode = staticProjectorMode ? staticProjectorMode : "append";
+    const isFormAssociated = (this.constructor as any).formAssociated;
+    const delegatesFocus = (this.constructor as any).delegatesFocus;
+    this.#delegatesFocus = delegatesFocus;
+    if (isFormAssociated) {
+      this.#internals = this.attachInternals();
     }
+    const css = (this.constructor as any).style;
 
-    if(prop.converter) {
-      this[prop.name] = prop.converter.fromAttribute(newValue);
-      return;
+    if (css) {
+      this.#useShadowRoot = true;
+      this.#projectorMode = "replace";
+      if (!this.shadowRoot) {
+        this.attachShadow({
+          mode: "open",
+          delegatesFocus: this.#delegatesFocus,
+        });
+      }
+      this.#initStylesheet(css);
+      const div = document.createElement("div");
+      this.shadowRoot.appendChild(div);
+      requestAnimationFrame(() => {
+        this.#createProjector(div, (this as any).render).then(() => {
+          this.#upgradeProperties();
+        });
+      });
+      window.addEventListener("updatecssapply", () => {
+        this.#polyfillCssApply();
+      });
+    }
+  }
+
+  #polyfillCssApply(): string {
+    let style = replaceApplyToCssVars(this.#cssText);
+    if (this.#cssText !== style) {
+      this.#cssText = style;
+      if (this.#hasAdoptedStyleSheetsSupport && this.#cssSheet) {
+        this.#cssSheet.replaceSync(style);
+      } else if (!this.#hasAdoptedStyleSheetsSupport) {
+        if (this.#linkElement) {
+          URL.revokeObjectURL(this.#linkElement.href);
+        }
+        this.#linkElement.href = URL.createObjectURL(
+          new Blob([style], { type: "text/css" }),
+        );
+      }
     }
+    return style;
+  }
 
-    const type = prop.type;
-    if (type === "string") {
-      this[prop.name] = newValue;
-    } else if (type === "number") {
-      this[prop.name] = parseFloat(newValue);
-    } else if (type === "boolean") {
-      this[prop.name] = newValue !== null;
-    } else if (type === "object") {
-      this[prop.name] = JSON.parse(newValue);
+  #initStylesheet(style: string) {
+    this.#cssText = style;
+    if (this.#useShadowRoot && this.shadowRoot) {
+      this.addStylesheetToRootNode(style, this.shadowRoot);
+    } else if (!this.#useShadowRoot) {
+      this.addStylesheetToRootNode(style, document);
     }
   }
 
-  #isFirstRenderStart = true;
+  #getHashCode(s: string) {
+    for (var i = 0, h = 0; i < s.length; i++)
+      h = (Math.imul(31, h) + s.charCodeAt(i)) | 0;
+    return h;
+  }
 
-  #isFirstRenderDone = true;
+  get #hasAdoptedStyleSheetsSupport(): boolean {
+    return (
+      Array.isArray(document.adoptedStyleSheets) &&
+      "replace" in CSSStyleSheet.prototype
+    );
+  }
 
+  /**
+   * Lifecycle callback invoked when the element is added to the DOM.
+   * Initializes controllers, processes pending property updates, and renders.
+   */
+  connectedCallback(): void {
+    if (this.#connected) {
+      return;
+    }
+    this.#connected = true;
+    let i = 0;
+    const controllersLength = this.#controllers.length;
+    while (i < controllersLength) {
+      const controller = this.#controllers[i];
+      if (controller?.connected) {
+        controller.connected();
+      }
+      i = i + 1;
+    }
+    // Process any pending updated callbacks that were queued during construction
+    processPendingUpdates(this);
+    this.renderNow();
+  }
 
-  #invokeRenderLifecycleFn(eventName: string) {
-    if (this[eventName]){
-      this[eventName](eventName === "renderStart" ? this.#isFirstRenderStart : this.#isFirstRenderDone);
+  /**
+   * Lifecycle callback invoked when the element is removed from the DOM.
+   * Marks the component as disconnected.
+   */
+  disconnectedCallback(): void {
+    if (this.#connected === false) {
+      return;
     }
-    const controllerEventName = `host${eventName.charAt(0).toUpperCase()}${eventName.slice(1)}`;
-    this.#controllers.forEach((controller) => {
-      if (controller[controllerEventName]) {
-        controller[controllerEventName](eventName === "renderStart" ? this.#isFirstRenderStart : this.#isFirstRenderDone);
+    this.#connected = false;
+    let i = 0;
+    const controllersLength = this.#controllers.length;
+    while (i < controllersLength) {
+      const controller = this.#controllers[i];
+      if (controller?.disconnected) {
+        controller.disconnected();
       }
-    });
-    if (eventName === "renderStart") {
-      this.#isFirstRenderStart = false;
-    } else {
-      this.#isFirstRenderDone = false;
+      i = i + 1;
+    }
+  }
+
+  /**
+   * Lifecycle hook called when observed attributes change
+   * Synchronizes HTML attribute changes to reactive properties
+   * Prevents infinite loops by skipping updates initiated by property setters
+   *
+   * @param {string} name - The name of the changed attribute
+   * @param {string | null} oldValue - The previous attribute value (unused)
+   * @param {string | null} newValue - The new attribute value
+   *
+   * @private
+   */
+  attributeChangedCallback(
+    name: string,
+    oldValue: string | null,
+    newValue: string | null,
+  ): void {
+    // Skip if this attribute change came from a property setter (prevent infinite loop)
+    // Also skip if the value didn't actually change (some browsers may call this callback even if the value is the same)
+    if (isSettingAttribute(this) || newValue === oldValue) {
+      return;
     }
+    const ctor = this.constructor as ComponentConstructor;
+    if (!ctor?._propertyInfo) {
+      return;
+    }
+
+    const propertyFound: PropertyOptionsWithName | undefined = Array.from(
+      ctor._propertyInfo.values(),
+    ).find(
+      (options) =>
+        options.attribute === name && typeof options.attribute === "string",
+    );
+    if (!propertyFound) {
+      return;
+    }
+    const converter = propertyFound.converter;
+    let value: unknown = newValue;
+
+    if (converter?.fromAttribute) {
+      value = converter.fromAttribute(newValue);
+    } else if (propertyFound.type === Boolean) {
+      value = newValue !== null;
+    } else if (propertyFound.type === Number) {
+      value = newValue === null ? null : Number(newValue);
+    }
+    (this as Record<string, unknown>)[propertyFound.name] = value;
+    this.scheduleRender();
   }
+
+  abstract render(): VNode;
 }