fix(properties-panel): enhance element detection and error handling for nested structures

2025-06-16 15:56:12 +00:00
parent 992af2668e
commit 21b7158a35
9 changed files with 693 additions and 26 deletions
--- a/test/elements/test-withwrapper.ts
+++ b/test/elements/test-withwrapper.ts
@ -0,0 +1,111 @@
+import {
+  DeesElement,
+  customElement,
+  type TemplateResult,
+  html,
+  property,
+  css,
+} from '@design.estate/dees-element';
+
+// Import from local demotools
+import '../../ts_demotools/demotools.js';
+
+@customElement('test-withwrapper')
+export class TestWithWrapper extends DeesElement {
+  public static demo = () => html`
+    <dees-demowrapper .runAfterRender=${async (wrapper) => {
+      console.log('DemoWrapper: Found wrapper element', wrapper);
+      
+      const testElement = wrapper.querySelector('test-withwrapper');
+      if (testElement) {
+        console.log('DemoWrapper: Found test-withwrapper element');
+        testElement.dynamicValue = 'Set by demo wrapper!';
+        testElement.counter = 100;
+        
+        // Test querySelector functionality
+        const innerDiv = wrapper.querySelector('.inner-content');
+        console.log('DemoWrapper: Found inner div:', innerDiv);
+        
+        // Test querySelectorAll
+        const allButtons = wrapper.querySelectorAll('button');
+        console.log(`DemoWrapper: Found ${allButtons.length} buttons`);
+      }
+    }}>
+      <test-withwrapper></test-withwrapper>
+      <div style="margin-top: 10px; padding: 10px; background: #e0e0e0;">
+        This div is also inside the wrapper
+      </div>
+    </dees-demowrapper>
+  `;
+
+  @property({ type: String })
+  public dynamicValue: string = 'Initial value';
+
+  @property({ type: Number })
+  public counter: number = 0;
+
+  @property({ type: Boolean })
+  public isActive: boolean = false;
+
+  public static styles = [
+    css`
+      :host {
+        display: block;
+        padding: 20px;
+        background: #e8f5e9;
+        border: 2px solid #4caf50;
+        border-radius: 8px;
+      }
+      .wrapper-info {
+        background: #c8e6c9;
+        padding: 10px;
+        border-radius: 4px;
+        margin-bottom: 10px;
+      }
+      .inner-content {
+        background: white;
+        padding: 15px;
+        border-radius: 4px;
+        margin: 10px 0;
+      }
+      button {
+        background: #4caf50;
+        color: white;
+        border: none;
+        padding: 8px 16px;
+        border-radius: 4px;
+        cursor: pointer;
+        margin-right: 10px;
+      }
+      button:hover {
+        background: #45a049;
+      }
+      .status {
+        margin-top: 10px;
+        font-family: monospace;
+      }
+    `
+  ];
+
+  public render() {
+    return html`
+      <div class="wrapper-info">
+        This element is wrapped with dees-demowrapper in its demo
+      </div>
+      
+      <div class="inner-content">
+        <h3>Dynamic Value: ${this.dynamicValue}</h3>
+        <p>Counter: ${this.counter}</p>
+        <p>Active: ${this.isActive ? 'Yes' : 'No'}</p>
+        
+        <button @click=${() => this.counter++}>Increment</button>
+        <button @click=${() => this.isActive = !this.isActive}>Toggle Active</button>
+        <button @click=${() => this.dynamicValue = 'Clicked!'}>Change Value</button>
+      </div>
+      
+      <div class="status">
+        Properties panel should detect this element inside the wrapper
+      </div>
+    `;
+  }
+}