p-elements-core 1.2.32-rc8 → 1.2.32

package/src/custom-element.test.ts

@@ -1,906 +1,906 @@
-/**
- * Tests for CustomElement base class
- * Covers lifecycle, rendering, and update coordination
- */
-
-import { describe, it, expect } from 'vitest';
-import './test-setup.js';
-import { CustomElement } from './custom-element.js';
-import { customElementConfig } from './decorators/custom-element-config.js';
-import { property } from './decorators/property.js';
-import { generateUniqueTagName } from './test-setup.js';
-import { waitForRender } from './test-utils.js';
-
-describe('CustomElement', () => {
-  describe('Lifecycle', () => {
-    it('should create shadow root on connection', async () => {
-      const tagName = generateUniqueTagName('lifecycle-test');
-      
-      @customElementConfig({ tagName })
-      class LifecycleTest extends CustomElement {
-        static style = ':host { display: block; }';
-        
-        render() {
-          return { vnodeSelector: 'div', properties: {}, children: [], text: undefined, domNode: null };
-        }
-      }
-
-      const el = document.createElement(tagName) as LifecycleTest;
-      // Shadow root is created in constructor when static style is defined
-      expect(el.shadowRoot).toBeDefined();
-      
-      document.body.appendChild(el);
-      await waitForRender(el);
-
-      expect(el.shadowRoot).toBeDefined();
-      
-      document.body.removeChild(el);
-    });
-
-    it('should call init() once', async () => {
-      const tagName = generateUniqueTagName('lifecycle-test');
-      let initCount = 0;
-      
-      @customElementConfig({ tagName })
-      class LifecycleTest extends CustomElement {
-        static style = ':host { display: block; }';
-        
-        init() {
-          initCount++;
-        }
-
-        render() {
-          return { vnodeSelector: 'div', properties: {}, children: [], text: undefined, domNode: null };
-        }
-      }
-
-      const el = document.createElement(tagName) as LifecycleTest;
-      document.body.appendChild(el);
-      await waitForRender(el);
-      
-      // Remove and re-add
-      document.body.removeChild(el);
-      document.body.appendChild(el);
-      await waitForRender(el);
-
-      expect(initCount).toBe(1);
-      
-      document.body.removeChild(el);
-    });
-
-    it('should resolve updateComplete promise', async () => {
-      const tagName = generateUniqueTagName('lifecycle-test');
-      
-      @customElementConfig({ tagName })
-      class LifecycleTest extends CustomElement {
-        static style = ':host { display: block; }';
-        
-        @property({ type: String })
-        value = '';
-
-        render() {
-          return { vnodeSelector: 'div', properties: {}, children: [], text: undefined, domNode: null };
-        }
-      }
-
-      const el = document.createElement(tagName) as LifecycleTest;
-      document.body.appendChild(el);
-      
-      el.value = 'test';
-      const promise = el.updateComplete;
-
-      expect(promise).toBeInstanceOf(Promise);
-      await promise;
-      
-      expect(el.value).toBe('test');
-      
-      document.body.removeChild(el);
-    });
-  });
-
-  describe('Rendering', () => {
-    it('should render content to shadow DOM', async () => {
-      const tagName = generateUniqueTagName('render-test');
-      
-      @customElementConfig({ tagName })
-      class RenderTest extends CustomElement {
-        static style = ':host { display: block; }';
-        
-        render() {
-          return {
-            vnodeSelector: 'div',
-            properties: { class: 'content' }, text: undefined, domNode: null,
-            children: [
-              { vnodeSelector: 'span', properties: {}, text: 'Hello World', domNode: null, children: undefined },
-            ],
-          };
-        }
-      }
-
-      const el = document.createElement(tagName) as RenderTest;
-      document.body.appendChild(el);
-      await waitForRender(el);
-
-      const div = el.shadowRoot?.querySelector('div');
-      expect(div).toBeDefined();
-      expect(div?.className).toBe('content');
-
-      const span = el.shadowRoot?.querySelector('span');
-      expect(span).toBeDefined();
-      expect(span?.textContent).toBe('Hello World');
-      
-      document.body.removeChild(el);
-    });
-
-    it('should re-render when renderNow() is called', async () => {
-      const tagName = generateUniqueTagName('render-test');
-      let renderCount = 0;
-      
-      @customElementConfig({ tagName })
-      class RenderTest extends CustomElement {
-        static style = ':host { display: block; }';
-        
-        render() {
-          renderCount++;
-          return { vnodeSelector: 'div', properties: {}, children: [], text: undefined, domNode: null };
-        }
-      }
-
-      const el = document.createElement(tagName) as RenderTest;
-      document.body.appendChild(el);
-      await waitForRender(el);
-
-      const initialCount = renderCount;
-      el.renderNow();
-      
-      expect(renderCount).toBeGreaterThan(initialCount);
-      
-      document.body.removeChild(el);
-    });
-
-    it('should inject static style into shadow DOM', async () => {
-      const tagName = generateUniqueTagName('style-test');
-      
-      @customElementConfig({ tagName })
-      class StyleTest extends CustomElement {
-        static style = 'div { color: red; }';
-
-        render() {
-          return { vnodeSelector: 'div', properties: {}, children: [], text: undefined, domNode: null };
-        }
-      }
-
-      const el = document.createElement(tagName) as StyleTest;
-      document.body.appendChild(el);
-      await waitForRender(el);
-
-      // Check that shadow root exists and has content
-      expect(el.shadowRoot).toBeDefined();
-      const div = el.shadowRoot?.querySelector('div');
-      expect(div).toBeDefined();
-      
-      document.body.removeChild(el);
-    });
-  });
-
-  describe('Update coordination', () => {
-    it('should call updated() after property changes', async () => {
-      const tagName = generateUniqueTagName('update-test');
-      const updates: string[] = [];
-      
-      @customElementConfig({ tagName })
-      class UpdateTest extends CustomElement {
-        static style = ':host { display: block; }';
-        
-        @property({ type: String })
-        value = '';
-
-        updated(propertyKey: string) {
-          updates.push(propertyKey);
-        }
-
-        render() {
-          return { vnodeSelector: 'div', properties: {}, children: [], text: undefined, domNode: null };
-        }
-      }
-
-      const el = document.createElement(tagName) as UpdateTest;
-      document.body.appendChild(el);
-      
-      el.value = 'changed';
-      await waitForRender(el);
-
-      expect(updates).toContain('value');
-      
-      document.body.removeChild(el);
-    });
-
-    it('should block update when shouldUpdate() returns false', async () => {
-      const tagName = generateUniqueTagName('update-test');
-      
-      @customElementConfig({ tagName })
-      class UpdateTest extends CustomElement {
-        static style = ':host { display: block; }';
-        
-        @property({ type: Number })
-        count = 0;
-
-        shouldUpdate(propertyKey: string, oldValue: any, newValue: any): boolean {
-          return newValue !== 5; // Block updates to 5
-        }
-
-        render() {
-          return { vnodeSelector: 'div', properties: {}, children: [], text: undefined, domNode: null };
-        }
-      }
-
-      const el = document.createElement(tagName) as UpdateTest;
-      document.body.appendChild(el);
-
-      el.count = 5;
-      await waitForRender(el);
-      expect(el.count).toBe(0); // Should not update
-
-      el.count = 10;
-      await waitForRender(el);
-      expect(el.count).toBe(10); // Should update
-      
-      document.body.removeChild(el);
-    });
-  });
-
-  describe('Form association', () => {
-    it('should support form-associated custom elements', async () => {
-      const tagName = generateUniqueTagName('form-test');
-      
-      @customElementConfig({ tagName })
-      class FormTest extends CustomElement {
-        static formAssociated = true;
-        static style = ':host { display: inline-block; }';
-
-        @property({ type: String })
-        value = '';
-
-        render() {
-          return { vnodeSelector: 'input', properties: {}, children: [], text: undefined, domNode: null };
-        }
-      }
-
-      const form = document.createElement('form');
-      const el = document.createElement(tagName) as FormTest;
-      form.appendChild(el);
-      document.body.appendChild(form);
-      await waitForRender(el);
-
-      expect(el.internals).toBeDefined();
-      
-      document.body.removeChild(form);
-    });
-  });
-
-  describe('Attribute changes', () => {
-    it('should sync attribute changes to properties', async () => {
-      const tagName = generateUniqueTagName('attr-test');
-      
-      @customElementConfig({ tagName })
-      class AttrTest extends CustomElement {
-        static style = ':host { display: block; }';
-
-        @property({ type: String })
-        message = '';
-
-        render() {
-          return { vnodeSelector: 'div', properties: {}, children: [], text: undefined, domNode: null };
-        }
-      }
-
-      const el = document.createElement(tagName) as AttrTest;
-      document.body.appendChild(el);
-      await waitForRender(el);
-
-      el.setAttribute('message', 'hello');
-      await new Promise(resolve => setTimeout(resolve, 10));
-      expect(el.message).toBe('hello');
-      
-      document.body.removeChild(el);
-    });
-
-    it('should handle boolean attributes', async () => {
-      const tagName = generateUniqueTagName('attr-test');
-      
-      @customElementConfig({ tagName })
-      class AttrTest extends CustomElement {
-        static style = ':host { display: block; }';
-
-        @property({ type: Boolean })
-        enabled = false;
-
-        render() {
-          return { vnodeSelector: 'div', properties: {}, children: [], text: undefined, domNode: null };
-        }
-      }
-
-      const el = document.createElement(tagName) as AttrTest;
-      document.body.appendChild(el);
-      await waitForRender(el);
-
-      el.setAttribute('enabled', '');
-      await new Promise(resolve => setTimeout(resolve, 10));
-      expect(el.enabled).toBe(true);
-
-      el.removeAttribute('enabled');
-      await new Promise(resolve => setTimeout(resolve, 10));
-      expect(el.enabled).toBe(false);
-      
-      document.body.removeChild(el);
-    });
-  });
-
-  describe('Projector modes', () => {
-    it('should support different projector modes', async () => {
-      const tagName = generateUniqueTagName('projector-test');
-      
-      @customElementConfig({ tagName })
-      class ProjectorTest extends CustomElement {
-        static style = ':host { display: block; }';
-        static projectorMode = 'merge';
-
-        render() {
-          return { vnodeSelector: 'div', properties: {}, text: undefined, domNode: null, children: [
-            { vnodeSelector: 'span', properties: {}, children: [], text: 'test', domNode: null }
-          ] };
-        }
-      }
-
-      const el = document.createElement(tagName) as ProjectorTest;
-      document.body.appendChild(el);
-      await waitForRender(el);
-
-      expect(el.shadowRoot).toBeDefined();
-      expect(el.shadowRoot.querySelector('span')).toBeDefined();
-      
-      document.body.removeChild(el);
-    });
-  });
-
-  describe('Property upgrades', () => {
-    it('should upgrade properties set before connection', async () => {
-      const tagName = generateUniqueTagName('upgrade-test');
-      
-      @customElementConfig({ tagName })
-      class UpgradeTest extends CustomElement {
-        static style = ':host { display: block; }';
-
-        @property({ type: String })
-        presetValue = '';
-
-        render() {
-          return { vnodeSelector: 'div', properties: {}, children: [], text: undefined, domNode: null };
-        }
-      }
-
-      const el = document.createElement(tagName) as UpgradeTest;
-      
-      // Set property before connecting to DOM
-      (el as any).presetValue = 'preset';
-      
-      document.body.appendChild(el);
-      await waitForRender(el);
-
-      expect(el.presetValue).toBe('preset');
-      
-      document.body.removeChild(el);
-    });
-  });
-
-  describe('Controllers', () => {
-    it('should invoke controller lifecycle methods', async () => {
-      const tagName = generateUniqueTagName('controller-test');
-      const lifecycle: string[] = [];
-
-      const controller = {
-        connected: () => lifecycle.push('connected'),
-        disconnected: () => lifecycle.push('disconnected'),
-        hostRenderStart: () => lifecycle.push('renderStart'),
-        hostRenderDone: () => lifecycle.push('renderDone'),
-        renderNow: () => {},
-        hostElement: null as any
-      };
-
-      @customElementConfig({ tagName })
-      class ControllerTest extends CustomElement {
-        static style = ':host { display: block; }';
-
-        constructor() {
-          super();
-          this.addController(controller);
-        }
-
-        render() {
-          return { vnodeSelector: 'div', properties: {}, children: [], text: undefined, domNode: null };
-        }
-      }
-
-      const el = document.createElement(tagName) as ControllerTest;
-      document.body.appendChild(el);
-      await waitForRender(el);
-
-      expect(lifecycle).toContain('connected');
-      expect(lifecycle).toContain('renderStart');
-      expect(lifecycle).toContain('renderDone');
-
-      document.body.removeChild(el);
-      expect(lifecycle).toContain('disconnected');
-    });
-
-    it('should call controller.connected when added after element is connected', async () => {
-      const tagName = generateUniqueTagName('controller-test');
-      let controllerConnected = false;
-
-      @customElementConfig({ tagName })
-      class ControllerTest extends CustomElement {
-        static style = ':host { display: block; }';
-
-        render() {
-          return { vnodeSelector: 'div', properties: {}, children: [], text: undefined, domNode: null };
-        }
-      }
-
-      const el = document.createElement(tagName) as ControllerTest;
-      document.body.appendChild(el);
-      await waitForRender(el);
-
-      // Add controller after connection
-      el.addController({
-        connected: () => { controllerConnected = true; },
-        renderNow: () => {},
-        hostElement: null as any
-      });
-
-      expect(controllerConnected).toBe(true);
-      document.body.removeChild(el);
-    });
-
-    it('should handle multiple controllers', async () => {
-      const tagName = generateUniqueTagName('controller-test');
-      const calls: string[] = [];
-
-      @customElementConfig({ tagName })
-      class ControllerTest extends CustomElement {
-        static style = ':host { display: block; }';
-
-        constructor() {
-          super();
-          this.addController({
-            connected: () => calls.push('controller1-connected'),
-            renderNow: () => {},
-            hostElement: null as any
-          });
-          this.addController({
-            connected: () => calls.push('controller2-connected'),
-            renderNow: () => {},
-            hostElement: null as any
-          });
-        }
-
-        render() {
-          return { vnodeSelector: 'div', properties: {}, children: [], text: undefined, domNode: null };
-        }
-      }
-
-      const el = document.createElement(tagName) as ControllerTest;
-      document.body.appendChild(el);
-      await waitForRender(el);
-
-      expect(calls).toContain('controller1-connected');
-      expect(calls).toContain('controller2-connected');
-
-      document.body.removeChild(el);
-    });
-  });
-
-  describe('Render lifecycle hooks', () => {
-    it('should call renderStart and renderDone hooks', async () => {
-      const tagName = generateUniqueTagName('lifecycle-test');
-      const events: string[] = [];
-
-      @customElementConfig({ tagName })
-      class LifecycleTest extends CustomElement {
-        static style = ':host { display: block; }';
-
-        renderStart = (isFirst: boolean) => {
-          events.push(`renderStart-${isFirst}`);
-        };
-
-        renderDone = (isFirst: boolean) => {
-          events.push(`renderDone-${isFirst}`);
-        };
-
-        render() {
-          return { vnodeSelector: 'div', properties: {}, children: [], text: undefined, domNode: null };
-        }
-      }
-
-      const el = document.createElement(tagName) as LifecycleTest;
-      document.body.appendChild(el);
-      await waitForRender(el);
-
-      expect(events).toContain('renderStart-true');
-      expect(events).toContain('renderDone-true');
-
-      // Second render should have isFirst=false
-      el.renderNow();
-      await waitForRender(el);
-
-      expect(events).toContain('renderStart-false');
-      expect(events).toContain('renderDone-false');
-
-      document.body.removeChild(el);
-    });
-
-    it('should dispatch firstRender event', async () => {
-      const tagName = generateUniqueTagName('lifecycle-test');
-      let firstRenderDispatched = false;
-
-      @customElementConfig({ tagName })
-      class LifecycleTest extends CustomElement {
-        static style = ':host { display: block; }';
-
-        render() {
-          return { vnodeSelector: 'div', properties: {}, children: [], text: undefined, domNode: null };
-        }
-      }
-
-      const el = document.createElement(tagName) as LifecycleTest;
-      el.addEventListener('firstRender', () => {
-        firstRenderDispatched = true;
-      });
-
-      document.body.appendChild(el);
-      await waitForRender(el);
-
-      expect(firstRenderDispatched).toBe(true);
-      document.body.removeChild(el);
-    });
-  });
-
-  describe('requestUpdate and updateComplete', () => {
-    it('should return promise for requestUpdate', async () => {
-      const tagName = generateUniqueTagName('update-test');
-
-      @customElementConfig({ tagName })
-      class UpdateTest extends CustomElement {
-        static style = ':host { display: block; }';
-
-        render() {
-          return { vnodeSelector: 'div', properties: {}, children: [], text: undefined, domNode: null };
-        }
-      }
-
-      const el = document.createElement(tagName) as UpdateTest;
-      document.body.appendChild(el);
-      await waitForRender(el);
-
-      const promise = el.requestUpdate();
-      expect(promise).toBeInstanceOf(Promise);
-      
-      // Wait for the update
-      await Promise.race([promise, new Promise(resolve => setTimeout(resolve, 100))]);
-
-      document.body.removeChild(el);
-    });
-
-    it('should handle multiple requestUpdate calls', async () => {
-      const tagName = generateUniqueTagName('update-test');
-      let renderCount = 0;
-
-      @customElementConfig({ tagName })
-      class UpdateTest extends CustomElement {
-        static style = ':host { display: block; }';
-
-        render() {
-          renderCount++;
-          return { vnodeSelector: 'div', properties: {}, children: [], text: undefined, domNode: null };
-        }
-      }
-
-      const el = document.createElement(tagName) as UpdateTest;
-      document.body.appendChild(el);
-      await waitForRender(el);
-
-      const initialCount = renderCount;
-      el.requestUpdate();
-      el.requestUpdate();
-      el.requestUpdate();
-
-      await new Promise(resolve => setTimeout(resolve, 100));
-      // Multiple requestUpdate calls should only trigger one additional render
-      expect(renderCount).toBe(initialCount + 1);
-
-      document.body.removeChild(el);
-    });
-
-    it('should resolve updateComplete after property change', async () => {
-      const tagName = generateUniqueTagName('update-test');
-
-      @customElementConfig({ tagName })
-      class UpdateTest extends CustomElement {
-        static style = ':host { display: block; }';
-
-        @property({ type: String })
-        value = '';
-
-        render() {
-          return { vnodeSelector: 'div', properties: {}, text: undefined, domNode: null, children: [
-            { vnodeSelector: '', properties: undefined, children: undefined, text: this.value, domNode: null }
-          ] };
-        }
-      }
-
-      const el = document.createElement(tagName) as UpdateTest;
-      document.body.appendChild(el);
-      await waitForRender(el);
-
-      el.value = 'test';
-      const updatePromise = el.updateComplete;
-      
-      await updatePromise;
-      expect(el.shadowRoot?.textContent).toContain('test');
-
-      document.body.removeChild(el);
-    });
-  });
-
-  describe('scheduleRender', () => {
-    it('should schedule a render via projector', async () => {
-      const tagName = generateUniqueTagName('schedule-test');
-      let renderCount = 0;
-
-      @customElementConfig({ tagName })
-      class ScheduleTest extends CustomElement {
-        static style = ':host { display: block; }';
-
-        @property({ type: Number })
-        count = 0;
-
-        render() {
-          renderCount++;
-          return { vnodeSelector: 'div', properties: {}, children: [], text: undefined, domNode: null };
-        }
-      }
-
-      const el = document.createElement(tagName) as ScheduleTest;
-      document.body.appendChild(el);
-      await waitForRender(el);
-
-      const initialRenderCount = renderCount;
-      el.count = 1;
-      el.scheduleRender();
-
-      await new Promise(resolve => setTimeout(resolve, 50));
-      expect(renderCount).toBeGreaterThan(initialRenderCount);
-
-      document.body.removeChild(el);
-    });
-  });
-
-  describe('Form internals', () => {
-    it('should provide access to internals for form-associated elements', async () => {
-      const tagName = generateUniqueTagName('form-internals-test');
-
-      @customElementConfig({ tagName })
-      class FormInternalsTest extends CustomElement {
-        static formAssociated = true;
-        static style = ':host { display: inline-block; }';
-
-        render() {
-          return { vnodeSelector: 'input', properties: {}, children: [], text: undefined, domNode: null };
-        }
-      }
-
-      const el = document.createElement(tagName) as FormInternalsTest;
-      document.body.appendChild(el);
-      await waitForRender(el);
-
-      expect(el.internals).toBeDefined();
-      expect(el.internals).not.toBeNull();
-
-      document.body.removeChild(el);
-    });
-
-    it('should return null for non-form-associated elements', async () => {
-      const tagName = generateUniqueTagName('non-form-test');
-
-      @customElementConfig({ tagName })
-      class NonFormTest extends CustomElement {
-        static style = ':host { display: block; }';
-
-        render() {
-          return { vnodeSelector: 'div', properties: {}, children: [], text: undefined, domNode: null };
-        }
-      }
-
-      const el = document.createElement(tagName) as NonFormTest;
-      document.body.appendChild(el);
-      await waitForRender(el);
-
-      expect(el.internals).toBeNull();
-
-      document.body.removeChild(el);
-    });
-  });
-
-  describe('Shadow DOM configuration', () => {
-    it('should support delegatesFocus option', async () => {
-      const tagName = generateUniqueTagName('focus-test');
-
-      @customElementConfig({ tagName })
-      class FocusTest extends CustomElement {
-        static style = ':host { display: block; }';
-        static delegatesFocus = true;
-
-        render() {
-          return { vnodeSelector: 'input', properties: {}, children: [], text: undefined, domNode: null };
-        }
-      }
-
-      const el = document.createElement(tagName) as FocusTest;
-      document.body.appendChild(el);
-      await waitForRender(el);
-
-      expect(el.shadowRoot).toBeDefined();
-      // delegatesFocus is set during attachShadow
-
-      document.body.removeChild(el);
-    });
-  });
-
-  describe('Attribute converters', () => {
-    it('should handle Number type attributes', async () => {
-      const tagName = generateUniqueTagName('number-attr-test');
-
-      @customElementConfig({ tagName })
-      class NumberAttrTest extends CustomElement {
-        static style = ':host { display: block; }';
-
-        @property({ type: Number })
-        count = 0;
-
-        render() {
-          return { vnodeSelector: 'div', properties: {}, children: [], text: undefined, domNode: null };
-        }
-      }
-
-      const el = document.createElement(tagName) as NumberAttrTest;
-      document.body.appendChild(el);
-      await waitForRender(el);
-
-      el.setAttribute('count', '42');
-      await new Promise(resolve => setTimeout(resolve, 10));
-      expect(el.count).toBe(42);
-
-      el.setAttribute('count', '0');
-      await new Promise(resolve => setTimeout(resolve, 10));
-      expect(el.count).toBe(0);
-
-      document.body.removeChild(el);
-    });
-
-    it('should handle custom converter', async () => {
-      const tagName = generateUniqueTagName('converter-test');
-
-      @customElementConfig({ tagName })
-      class ConverterTest extends CustomElement {
-        static style = ':host { display: block; }';
-
-        @property({ 
-          type: Object,
-          converter: {
-            fromAttribute: (value: string | null) => {
-              return value ? JSON.parse(value) : null;
-            },
-            toAttribute: (value: any) => {
-              return value ? JSON.stringify(value) : null;
-            }
-          }
-        })
-        data: any = null;
-
-        render() {
-          return { vnodeSelector: 'div', properties: {}, children: [], text: undefined, domNode: null };
-        }
-      }
-
-      const el = document.createElement(tagName) as ConverterTest;
-      document.body.appendChild(el);
-      await waitForRender(el);
-
-      el.setAttribute('data', '{"key":"value"}');
-      await new Promise(resolve => setTimeout(resolve, 10));
-      expect(el.data).toEqual({ key: 'value' });
-
-      document.body.removeChild(el);
-    });
-  });
-
-  describe('Edge cases', () => {
-    it('should handle renderNow when shadowRoot is not available', async () => {
-      const tagName = generateUniqueTagName('no-shadow-test');
-
-      @customElementConfig({ tagName })
-      class NoShadowTest extends CustomElement {
-        // No style means no shadow root initially
-        render() {
-          return { vnodeSelector: 'div', properties: {}, children: [], text: undefined, domNode: null };
-        }
-      }
-
-      const el = document.createElement(tagName) as NoShadowTest;
-      
-      // Call renderNow before connection (no shadow root)
-      el.renderNow(); // Should not throw
-
-      document.body.appendChild(el);
-      await waitForRender(el);
-      document.body.removeChild(el);
-    });
-
-    it('should handle disconnection during render', async () => {
-      const tagName = generateUniqueTagName('disconnect-test');
-
-      @customElementConfig({ tagName })
-      class DisconnectTest extends CustomElement {
-        static style = ':host { display: block; }';
-
-        render() {
-          return { vnodeSelector: 'div', properties: {}, children: [], text: undefined, domNode: null };
-        }
-      }
-
-      const el = document.createElement(tagName) as DisconnectTest;
-      document.body.appendChild(el);
-      await waitForRender(el);
-
-      // Disconnect and verify cleanup
-      document.body.removeChild(el);
-      
-      // Should not throw when scheduling render after disconnect
-      el.scheduleRender();
-    });
-
-    it('should handle multiple rapid property changes', async () => {
-      const tagName = generateUniqueTagName('rapid-test');
-
-      @customElementConfig({ tagName })
-      class RapidTest extends CustomElement {
-        static style = ':host { display: block; }';
-
-        @property({ type: Number })
-        value = 0;
-
-        render() {
-          return { vnodeSelector: 'div', properties: {}, text: undefined, domNode: null, children: [
-            { vnodeSelector: '', properties: undefined, children: undefined, text: String(this.value), domNode: null }
-          ] };
-        }
-      }
-
-      const el = document.createElement(tagName) as RapidTest;
-      document.body.appendChild(el);
-      await waitForRender(el);
-
-      // Rapid property changes
-      el.value = 1;
-      el.value = 2;
-      el.value = 3;
-      el.value = 4;
-      el.value = 5;
-
-      await el.updateComplete;
-      expect(el.value).toBe(5);
-      expect(el.shadowRoot?.textContent).toContain('5');
-
-      document.body.removeChild(el);
-    });
-  });
-});
+/**
+ * Tests for CustomElement base class
+ * Covers lifecycle, rendering, and update coordination
+ */
+
+import { describe, it, expect } from 'vitest';
+import './test-setup.js';
+import { CustomElement } from './custom-element.js';
+import { customElementConfig } from './decorators/custom-element-config.js';
+import { property } from './decorators/property.js';
+import { generateUniqueTagName } from './test-setup.js';
+import { waitForRender } from './test-utils.js';
+
+describe('CustomElement', () => {
+  describe('Lifecycle', () => {
+    it('should create shadow root on connection', async () => {
+      const tagName = generateUniqueTagName('lifecycle-test');
+      
+      @customElementConfig({ tagName })
+      class LifecycleTest extends CustomElement {
+        static style = ':host { display: block; }';
+        
+        render() {
+          return { vnodeSelector: 'div', properties: {}, children: [], text: undefined, domNode: null };
+        }
+      }
+
+      const el = document.createElement(tagName) as LifecycleTest;
+      // Shadow root is created in constructor when static style is defined
+      expect(el.shadowRoot).toBeDefined();
+      
+      document.body.appendChild(el);
+      await waitForRender(el);
+
+      expect(el.shadowRoot).toBeDefined();
+      
+      document.body.removeChild(el);
+    });
+
+    it('should call init() once', async () => {
+      const tagName = generateUniqueTagName('lifecycle-test');
+      let initCount = 0;
+      
+      @customElementConfig({ tagName })
+      class LifecycleTest extends CustomElement {
+        static style = ':host { display: block; }';
+        
+        init() {
+          initCount++;
+        }
+
+        render() {
+          return { vnodeSelector: 'div', properties: {}, children: [], text: undefined, domNode: null };
+        }
+      }
+
+      const el = document.createElement(tagName) as LifecycleTest;
+      document.body.appendChild(el);
+      await waitForRender(el);
+      
+      // Remove and re-add
+      document.body.removeChild(el);
+      document.body.appendChild(el);
+      await waitForRender(el);
+
+      expect(initCount).toBe(1);
+      
+      document.body.removeChild(el);
+    });
+
+    it('should resolve updateComplete promise', async () => {
+      const tagName = generateUniqueTagName('lifecycle-test');
+      
+      @customElementConfig({ tagName })
+      class LifecycleTest extends CustomElement {
+        static style = ':host { display: block; }';
+        
+        @property({ type: String })
+        value = '';
+
+        render() {
+          return { vnodeSelector: 'div', properties: {}, children: [], text: undefined, domNode: null };
+        }
+      }
+
+      const el = document.createElement(tagName) as LifecycleTest;
+      document.body.appendChild(el);
+      
+      el.value = 'test';
+      const promise = el.updateComplete;
+
+      expect(promise).toBeInstanceOf(Promise);
+      await promise;
+      
+      expect(el.value).toBe('test');
+      
+      document.body.removeChild(el);
+    });
+  });
+
+  describe('Rendering', () => {
+    it('should render content to shadow DOM', async () => {
+      const tagName = generateUniqueTagName('render-test');
+      
+      @customElementConfig({ tagName })
+      class RenderTest extends CustomElement {
+        static style = ':host { display: block; }';
+        
+        render() {
+          return {
+            vnodeSelector: 'div',
+            properties: { class: 'content' }, text: undefined, domNode: null,
+            children: [
+              { vnodeSelector: 'span', properties: {}, text: 'Hello World', domNode: null, children: undefined },
+            ],
+          };
+        }
+      }
+
+      const el = document.createElement(tagName) as RenderTest;
+      document.body.appendChild(el);
+      await waitForRender(el);
+
+      const div = el.shadowRoot?.querySelector('div');
+      expect(div).toBeDefined();
+      expect(div?.className).toBe('content');
+
+      const span = el.shadowRoot?.querySelector('span');
+      expect(span).toBeDefined();
+      expect(span?.textContent).toBe('Hello World');
+      
+      document.body.removeChild(el);
+    });
+
+    it('should re-render when renderNow() is called', async () => {
+      const tagName = generateUniqueTagName('render-test');
+      let renderCount = 0;
+      
+      @customElementConfig({ tagName })
+      class RenderTest extends CustomElement {
+        static style = ':host { display: block; }';
+        
+        render() {
+          renderCount++;
+          return { vnodeSelector: 'div', properties: {}, children: [], text: undefined, domNode: null };
+        }
+      }
+
+      const el = document.createElement(tagName) as RenderTest;
+      document.body.appendChild(el);
+      await waitForRender(el);
+
+      const initialCount = renderCount;
+      el.renderNow();
+      
+      expect(renderCount).toBeGreaterThan(initialCount);
+      
+      document.body.removeChild(el);
+    });
+
+    it('should inject static style into shadow DOM', async () => {
+      const tagName = generateUniqueTagName('style-test');
+      
+      @customElementConfig({ tagName })
+      class StyleTest extends CustomElement {
+        static style = 'div { color: red; }';
+
+        render() {
+          return { vnodeSelector: 'div', properties: {}, children: [], text: undefined, domNode: null };
+        }
+      }
+
+      const el = document.createElement(tagName) as StyleTest;
+      document.body.appendChild(el);
+      await waitForRender(el);
+
+      // Check that shadow root exists and has content
+      expect(el.shadowRoot).toBeDefined();
+      const div = el.shadowRoot?.querySelector('div');
+      expect(div).toBeDefined();
+      
+      document.body.removeChild(el);
+    });
+  });
+
+  describe('Update coordination', () => {
+    it('should call updated() after property changes', async () => {
+      const tagName = generateUniqueTagName('update-test');
+      const updates: string[] = [];
+      
+      @customElementConfig({ tagName })
+      class UpdateTest extends CustomElement {
+        static style = ':host { display: block; }';
+        
+        @property({ type: String })
+        value = '';
+
+        updated(propertyKey: string) {
+          updates.push(propertyKey);
+        }
+
+        render() {
+          return { vnodeSelector: 'div', properties: {}, children: [], text: undefined, domNode: null };
+        }
+      }
+
+      const el = document.createElement(tagName) as UpdateTest;
+      document.body.appendChild(el);
+      
+      el.value = 'changed';
+      await waitForRender(el);
+
+      expect(updates).toContain('value');
+      
+      document.body.removeChild(el);
+    });
+
+    it('should block update when shouldUpdate() returns false', async () => {
+      const tagName = generateUniqueTagName('update-test');
+      
+      @customElementConfig({ tagName })
+      class UpdateTest extends CustomElement {
+        static style = ':host { display: block; }';
+        
+        @property({ type: Number })
+        count = 0;
+
+        shouldUpdate(propertyKey: string, oldValue: any, newValue: any): boolean {
+          return newValue !== 5; // Block updates to 5
+        }
+
+        render() {
+          return { vnodeSelector: 'div', properties: {}, children: [], text: undefined, domNode: null };
+        }
+      }
+
+      const el = document.createElement(tagName) as UpdateTest;
+      document.body.appendChild(el);
+
+      el.count = 5;
+      await waitForRender(el);
+      expect(el.count).toBe(0); // Should not update
+
+      el.count = 10;
+      await waitForRender(el);
+      expect(el.count).toBe(10); // Should update
+      
+      document.body.removeChild(el);
+    });
+  });
+
+  describe('Form association', () => {
+    it('should support form-associated custom elements', async () => {
+      const tagName = generateUniqueTagName('form-test');
+      
+      @customElementConfig({ tagName })
+      class FormTest extends CustomElement {
+        static formAssociated = true;
+        static style = ':host { display: inline-block; }';
+
+        @property({ type: String })
+        value = '';
+
+        render() {
+          return { vnodeSelector: 'input', properties: {}, children: [], text: undefined, domNode: null };
+        }
+      }
+
+      const form = document.createElement('form');
+      const el = document.createElement(tagName) as FormTest;
+      form.appendChild(el);
+      document.body.appendChild(form);
+      await waitForRender(el);
+
+      expect(el.internals).toBeDefined();
+      
+      document.body.removeChild(form);
+    });
+  });
+
+  describe('Attribute changes', () => {
+    it('should sync attribute changes to properties', async () => {
+      const tagName = generateUniqueTagName('attr-test');
+      
+      @customElementConfig({ tagName })
+      class AttrTest extends CustomElement {
+        static style = ':host { display: block; }';
+
+        @property({ type: String })
+        message = '';
+
+        render() {
+          return { vnodeSelector: 'div', properties: {}, children: [], text: undefined, domNode: null };
+        }
+      }
+
+      const el = document.createElement(tagName) as AttrTest;
+      document.body.appendChild(el);
+      await waitForRender(el);
+
+      el.setAttribute('message', 'hello');
+      await new Promise(resolve => setTimeout(resolve, 10));
+      expect(el.message).toBe('hello');
+      
+      document.body.removeChild(el);
+    });
+
+    it('should handle boolean attributes', async () => {
+      const tagName = generateUniqueTagName('attr-test');
+      
+      @customElementConfig({ tagName })
+      class AttrTest extends CustomElement {
+        static style = ':host { display: block; }';
+
+        @property({ type: Boolean })
+        enabled = false;
+
+        render() {
+          return { vnodeSelector: 'div', properties: {}, children: [], text: undefined, domNode: null };
+        }
+      }
+
+      const el = document.createElement(tagName) as AttrTest;
+      document.body.appendChild(el);
+      await waitForRender(el);
+
+      el.setAttribute('enabled', '');
+      await new Promise(resolve => setTimeout(resolve, 10));
+      expect(el.enabled).toBe(true);
+
+      el.removeAttribute('enabled');
+      await new Promise(resolve => setTimeout(resolve, 10));
+      expect(el.enabled).toBe(false);
+      
+      document.body.removeChild(el);
+    });
+  });
+
+  describe('Projector modes', () => {
+    it('should support different projector modes', async () => {
+      const tagName = generateUniqueTagName('projector-test');
+      
+      @customElementConfig({ tagName })
+      class ProjectorTest extends CustomElement {
+        static style = ':host { display: block; }';
+        static projectorMode = 'merge';
+
+        render() {
+          return { vnodeSelector: 'div', properties: {}, text: undefined, domNode: null, children: [
+            { vnodeSelector: 'span', properties: {}, children: [], text: 'test', domNode: null }
+          ] };
+        }
+      }
+
+      const el = document.createElement(tagName) as ProjectorTest;
+      document.body.appendChild(el);
+      await waitForRender(el);
+
+      expect(el.shadowRoot).toBeDefined();
+      expect(el.shadowRoot.querySelector('span')).toBeDefined();
+      
+      document.body.removeChild(el);
+    });
+  });
+
+  describe('Property upgrades', () => {
+    it('should upgrade properties set before connection', async () => {
+      const tagName = generateUniqueTagName('upgrade-test');
+      
+      @customElementConfig({ tagName })
+      class UpgradeTest extends CustomElement {
+        static style = ':host { display: block; }';
+
+        @property({ type: String })
+        presetValue = '';
+
+        render() {
+          return { vnodeSelector: 'div', properties: {}, children: [], text: undefined, domNode: null };
+        }
+      }
+
+      const el = document.createElement(tagName) as UpgradeTest;
+      
+      // Set property before connecting to DOM
+      (el as any).presetValue = 'preset';
+      
+      document.body.appendChild(el);
+      await waitForRender(el);
+
+      expect(el.presetValue).toBe('preset');
+      
+      document.body.removeChild(el);
+    });
+  });
+
+  describe('Controllers', () => {
+    it('should invoke controller lifecycle methods', async () => {
+      const tagName = generateUniqueTagName('controller-test');
+      const lifecycle: string[] = [];
+
+      const controller = {
+        connected: () => lifecycle.push('connected'),
+        disconnected: () => lifecycle.push('disconnected'),
+        hostRenderStart: () => lifecycle.push('renderStart'),
+        hostRenderDone: () => lifecycle.push('renderDone'),
+        renderNow: () => {},
+        hostElement: null as any
+      };
+
+      @customElementConfig({ tagName })
+      class ControllerTest extends CustomElement {
+        static style = ':host { display: block; }';
+
+        constructor() {
+          super();
+          this.addController(controller);
+        }
+
+        render() {
+          return { vnodeSelector: 'div', properties: {}, children: [], text: undefined, domNode: null };
+        }
+      }
+
+      const el = document.createElement(tagName) as ControllerTest;
+      document.body.appendChild(el);
+      await waitForRender(el);
+
+      expect(lifecycle).toContain('connected');
+      expect(lifecycle).toContain('renderStart');
+      expect(lifecycle).toContain('renderDone');
+
+      document.body.removeChild(el);
+      expect(lifecycle).toContain('disconnected');
+    });
+
+    it('should call controller.connected when added after element is connected', async () => {
+      const tagName = generateUniqueTagName('controller-test');
+      let controllerConnected = false;
+
+      @customElementConfig({ tagName })
+      class ControllerTest extends CustomElement {
+        static style = ':host { display: block; }';
+
+        render() {
+          return { vnodeSelector: 'div', properties: {}, children: [], text: undefined, domNode: null };
+        }
+      }
+
+      const el = document.createElement(tagName) as ControllerTest;
+      document.body.appendChild(el);
+      await waitForRender(el);
+
+      // Add controller after connection
+      el.addController({
+        connected: () => { controllerConnected = true; },
+        renderNow: () => {},
+        hostElement: null as any
+      });
+
+      expect(controllerConnected).toBe(true);
+      document.body.removeChild(el);
+    });
+
+    it('should handle multiple controllers', async () => {
+      const tagName = generateUniqueTagName('controller-test');
+      const calls: string[] = [];
+
+      @customElementConfig({ tagName })
+      class ControllerTest extends CustomElement {
+        static style = ':host { display: block; }';
+
+        constructor() {
+          super();
+          this.addController({
+            connected: () => calls.push('controller1-connected'),
+            renderNow: () => {},
+            hostElement: null as any
+          });
+          this.addController({
+            connected: () => calls.push('controller2-connected'),
+            renderNow: () => {},
+            hostElement: null as any
+          });
+        }
+
+        render() {
+          return { vnodeSelector: 'div', properties: {}, children: [], text: undefined, domNode: null };
+        }
+      }
+
+      const el = document.createElement(tagName) as ControllerTest;
+      document.body.appendChild(el);
+      await waitForRender(el);
+
+      expect(calls).toContain('controller1-connected');
+      expect(calls).toContain('controller2-connected');
+
+      document.body.removeChild(el);
+    });
+  });
+
+  describe('Render lifecycle hooks', () => {
+    it('should call renderStart and renderDone hooks', async () => {
+      const tagName = generateUniqueTagName('lifecycle-test');
+      const events: string[] = [];
+
+      @customElementConfig({ tagName })
+      class LifecycleTest extends CustomElement {
+        static style = ':host { display: block; }';
+
+        renderStart = (isFirst: boolean) => {
+          events.push(`renderStart-${isFirst}`);
+        };
+
+        renderDone = (isFirst: boolean) => {
+          events.push(`renderDone-${isFirst}`);
+        };
+
+        render() {
+          return { vnodeSelector: 'div', properties: {}, children: [], text: undefined, domNode: null };
+        }
+      }
+
+      const el = document.createElement(tagName) as LifecycleTest;
+      document.body.appendChild(el);
+      await waitForRender(el);
+
+      expect(events).toContain('renderStart-true');
+      expect(events).toContain('renderDone-true');
+
+      // Second render should have isFirst=false
+      el.renderNow();
+      await waitForRender(el);
+
+      expect(events).toContain('renderStart-false');
+      expect(events).toContain('renderDone-false');
+
+      document.body.removeChild(el);
+    });
+
+    it('should dispatch firstRender event', async () => {
+      const tagName = generateUniqueTagName('lifecycle-test');
+      let firstRenderDispatched = false;
+
+      @customElementConfig({ tagName })
+      class LifecycleTest extends CustomElement {
+        static style = ':host { display: block; }';
+
+        render() {
+          return { vnodeSelector: 'div', properties: {}, children: [], text: undefined, domNode: null };
+        }
+      }
+
+      const el = document.createElement(tagName) as LifecycleTest;
+      el.addEventListener('firstRender', () => {
+        firstRenderDispatched = true;
+      });
+
+      document.body.appendChild(el);
+      await waitForRender(el);
+
+      expect(firstRenderDispatched).toBe(true);
+      document.body.removeChild(el);
+    });
+  });
+
+  describe('requestUpdate and updateComplete', () => {
+    it('should return promise for requestUpdate', async () => {
+      const tagName = generateUniqueTagName('update-test');
+
+      @customElementConfig({ tagName })
+      class UpdateTest extends CustomElement {
+        static style = ':host { display: block; }';
+
+        render() {
+          return { vnodeSelector: 'div', properties: {}, children: [], text: undefined, domNode: null };
+        }
+      }
+
+      const el = document.createElement(tagName) as UpdateTest;
+      document.body.appendChild(el);
+      await waitForRender(el);
+
+      const promise = el.requestUpdate();
+      expect(promise).toBeInstanceOf(Promise);
+      
+      // Wait for the update
+      await Promise.race([promise, new Promise(resolve => setTimeout(resolve, 100))]);
+
+      document.body.removeChild(el);
+    });
+
+    it('should handle multiple requestUpdate calls', async () => {
+      const tagName = generateUniqueTagName('update-test');
+      let renderCount = 0;
+
+      @customElementConfig({ tagName })
+      class UpdateTest extends CustomElement {
+        static style = ':host { display: block; }';
+
+        render() {
+          renderCount++;
+          return { vnodeSelector: 'div', properties: {}, children: [], text: undefined, domNode: null };
+        }
+      }
+
+      const el = document.createElement(tagName) as UpdateTest;
+      document.body.appendChild(el);
+      await waitForRender(el);
+
+      const initialCount = renderCount;
+      el.requestUpdate();
+      el.requestUpdate();
+      el.requestUpdate();
+
+      await new Promise(resolve => setTimeout(resolve, 100));
+      // Multiple requestUpdate calls should only trigger one additional render
+      expect(renderCount).toBe(initialCount + 1);
+
+      document.body.removeChild(el);
+    });
+
+    it('should resolve updateComplete after property change', async () => {
+      const tagName = generateUniqueTagName('update-test');
+
+      @customElementConfig({ tagName })
+      class UpdateTest extends CustomElement {
+        static style = ':host { display: block; }';
+
+        @property({ type: String })
+        value = '';
+
+        render() {
+          return { vnodeSelector: 'div', properties: {}, text: undefined, domNode: null, children: [
+            { vnodeSelector: '', properties: undefined, children: undefined, text: this.value, domNode: null }
+          ] };
+        }
+      }
+
+      const el = document.createElement(tagName) as UpdateTest;
+      document.body.appendChild(el);
+      await waitForRender(el);
+
+      el.value = 'test';
+      const updatePromise = el.updateComplete;
+      
+      await updatePromise;
+      expect(el.shadowRoot?.textContent).toContain('test');
+
+      document.body.removeChild(el);
+    });
+  });
+
+  describe('scheduleRender', () => {
+    it('should schedule a render via projector', async () => {
+      const tagName = generateUniqueTagName('schedule-test');
+      let renderCount = 0;
+
+      @customElementConfig({ tagName })
+      class ScheduleTest extends CustomElement {
+        static style = ':host { display: block; }';
+
+        @property({ type: Number })
+        count = 0;
+
+        render() {
+          renderCount++;
+          return { vnodeSelector: 'div', properties: {}, children: [], text: undefined, domNode: null };
+        }
+      }
+
+      const el = document.createElement(tagName) as ScheduleTest;
+      document.body.appendChild(el);
+      await waitForRender(el);
+
+      const initialRenderCount = renderCount;
+      el.count = 1;
+      el.scheduleRender();
+
+      await new Promise(resolve => setTimeout(resolve, 50));
+      expect(renderCount).toBeGreaterThan(initialRenderCount);
+
+      document.body.removeChild(el);
+    });
+  });
+
+  describe('Form internals', () => {
+    it('should provide access to internals for form-associated elements', async () => {
+      const tagName = generateUniqueTagName('form-internals-test');
+
+      @customElementConfig({ tagName })
+      class FormInternalsTest extends CustomElement {
+        static formAssociated = true;
+        static style = ':host { display: inline-block; }';
+
+        render() {
+          return { vnodeSelector: 'input', properties: {}, children: [], text: undefined, domNode: null };
+        }
+      }
+
+      const el = document.createElement(tagName) as FormInternalsTest;
+      document.body.appendChild(el);
+      await waitForRender(el);
+
+      expect(el.internals).toBeDefined();
+      expect(el.internals).not.toBeNull();
+
+      document.body.removeChild(el);
+    });
+
+    it('should return null for non-form-associated elements', async () => {
+      const tagName = generateUniqueTagName('non-form-test');
+
+      @customElementConfig({ tagName })
+      class NonFormTest extends CustomElement {
+        static style = ':host { display: block; }';
+
+        render() {
+          return { vnodeSelector: 'div', properties: {}, children: [], text: undefined, domNode: null };
+        }
+      }
+
+      const el = document.createElement(tagName) as NonFormTest;
+      document.body.appendChild(el);
+      await waitForRender(el);
+
+      expect(el.internals).toBeNull();
+
+      document.body.removeChild(el);
+    });
+  });
+
+  describe('Shadow DOM configuration', () => {
+    it('should support delegatesFocus option', async () => {
+      const tagName = generateUniqueTagName('focus-test');
+
+      @customElementConfig({ tagName })
+      class FocusTest extends CustomElement {
+        static style = ':host { display: block; }';
+        static delegatesFocus = true;
+
+        render() {
+          return { vnodeSelector: 'input', properties: {}, children: [], text: undefined, domNode: null };
+        }
+      }
+
+      const el = document.createElement(tagName) as FocusTest;
+      document.body.appendChild(el);
+      await waitForRender(el);
+
+      expect(el.shadowRoot).toBeDefined();
+      // delegatesFocus is set during attachShadow
+
+      document.body.removeChild(el);
+    });
+  });
+
+  describe('Attribute converters', () => {
+    it('should handle Number type attributes', async () => {
+      const tagName = generateUniqueTagName('number-attr-test');
+
+      @customElementConfig({ tagName })
+      class NumberAttrTest extends CustomElement {
+        static style = ':host { display: block; }';
+
+        @property({ type: Number })
+        count = 0;
+
+        render() {
+          return { vnodeSelector: 'div', properties: {}, children: [], text: undefined, domNode: null };
+        }
+      }
+
+      const el = document.createElement(tagName) as NumberAttrTest;
+      document.body.appendChild(el);
+      await waitForRender(el);
+
+      el.setAttribute('count', '42');
+      await new Promise(resolve => setTimeout(resolve, 10));
+      expect(el.count).toBe(42);
+
+      el.setAttribute('count', '0');
+      await new Promise(resolve => setTimeout(resolve, 10));
+      expect(el.count).toBe(0);
+
+      document.body.removeChild(el);
+    });
+
+    it('should handle custom converter', async () => {
+      const tagName = generateUniqueTagName('converter-test');
+
+      @customElementConfig({ tagName })
+      class ConverterTest extends CustomElement {
+        static style = ':host { display: block; }';
+
+        @property({ 
+          type: Object,
+          converter: {
+            fromAttribute: (value: string | null) => {
+              return value ? JSON.parse(value) : null;
+            },
+            toAttribute: (value: any) => {
+              return value ? JSON.stringify(value) : null;
+            }
+          }
+        })
+        data: any = null;
+
+        render() {
+          return { vnodeSelector: 'div', properties: {}, children: [], text: undefined, domNode: null };
+        }
+      }
+
+      const el = document.createElement(tagName) as ConverterTest;
+      document.body.appendChild(el);
+      await waitForRender(el);
+
+      el.setAttribute('data', '{"key":"value"}');
+      await new Promise(resolve => setTimeout(resolve, 10));
+      expect(el.data).toEqual({ key: 'value' });
+
+      document.body.removeChild(el);
+    });
+  });
+
+  describe('Edge cases', () => {
+    it('should handle renderNow when shadowRoot is not available', async () => {
+      const tagName = generateUniqueTagName('no-shadow-test');
+
+      @customElementConfig({ tagName })
+      class NoShadowTest extends CustomElement {
+        // No style means no shadow root initially
+        render() {
+          return { vnodeSelector: 'div', properties: {}, children: [], text: undefined, domNode: null };
+        }
+      }
+
+      const el = document.createElement(tagName) as NoShadowTest;
+      
+      // Call renderNow before connection (no shadow root)
+      el.renderNow(); // Should not throw
+
+      document.body.appendChild(el);
+      await waitForRender(el);
+      document.body.removeChild(el);
+    });
+
+    it('should handle disconnection during render', async () => {
+      const tagName = generateUniqueTagName('disconnect-test');
+
+      @customElementConfig({ tagName })
+      class DisconnectTest extends CustomElement {
+        static style = ':host { display: block; }';
+
+        render() {
+          return { vnodeSelector: 'div', properties: {}, children: [], text: undefined, domNode: null };
+        }
+      }
+
+      const el = document.createElement(tagName) as DisconnectTest;
+      document.body.appendChild(el);
+      await waitForRender(el);
+
+      // Disconnect and verify cleanup
+      document.body.removeChild(el);
+      
+      // Should not throw when scheduling render after disconnect
+      el.scheduleRender();
+    });
+
+    it('should handle multiple rapid property changes', async () => {
+      const tagName = generateUniqueTagName('rapid-test');
+
+      @customElementConfig({ tagName })
+      class RapidTest extends CustomElement {
+        static style = ':host { display: block; }';
+
+        @property({ type: Number })
+        value = 0;
+
+        render() {
+          return { vnodeSelector: 'div', properties: {}, text: undefined, domNode: null, children: [
+            { vnodeSelector: '', properties: undefined, children: undefined, text: String(this.value), domNode: null }
+          ] };
+        }
+      }
+
+      const el = document.createElement(tagName) as RapidTest;
+      document.body.appendChild(el);
+      await waitForRender(el);
+
+      // Rapid property changes
+      el.value = 1;
+      el.value = 2;
+      el.value = 3;
+      el.value = 4;
+      el.value = 5;
+
+      await el.updateComplete;
+      expect(el.value).toBe(5);
+      expect(el.shadowRoot?.textContent).toContain('5');
+
+      document.body.removeChild(el);
+    });
+  });
+});