51 lines
1.9 KiB
Markdown
51 lines
1.9 KiB
Markdown
# Project Hints and Findings
|
|
|
|
## Properties Panel Element Detection Issue (Fixed)
|
|
|
|
### Problem
|
|
The properties panel had timing issues detecting rendered elements because:
|
|
1. Elements are rendered asynchronously via lit's `render()` function in the dashboard component
|
|
2. The properties panel tried to find elements immediately without waiting for render completion
|
|
3. Element search only looked at direct children of the viewport, missing nested elements or those inside shadow DOM
|
|
|
|
### Solution Implemented
|
|
1. Added a 100ms initial delay to allow render completion
|
|
2. Implemented recursive element search that:
|
|
- Searches through nested children up to 5 levels deep
|
|
- Checks shadow roots of elements
|
|
- Handles complex DOM structures
|
|
3. Added retry mechanism with up to 5 attempts (200ms between retries)
|
|
4. Improved error messages to show retry count
|
|
|
|
### Code Flow
|
|
1. Dashboard renders element demo into viewport using `render(anonItem.demo(), viewport)`
|
|
2. Properties panel waits, then searches recursively for the element instance
|
|
3. If not found, retries with delays to handle async rendering
|
|
4. Once found, extracts and displays element properties
|
|
|
|
## Demo Tools
|
|
|
|
### DeesDemoWrapper Component
|
|
A utility component for wrapping demo elements with post-render functionality.
|
|
|
|
**Usage:**
|
|
```typescript
|
|
import { DeesDemoWrapper } from '@design.estate/dees-wcctools/demoTools';
|
|
|
|
// In your demo function:
|
|
demo: () => html`
|
|
<dees-demowrapper .runAfterRender=${(element) => {
|
|
// Do something with the rendered element
|
|
element.setAttribute('data-demo', 'true');
|
|
console.log('Element rendered:', element);
|
|
}}>
|
|
<my-custom-element></my-custom-element>
|
|
</dees-demowrapper>
|
|
`
|
|
```
|
|
|
|
**Features:**
|
|
- Wraps demo elements without affecting layout (uses `display: contents`)
|
|
- Provides access to the rendered element instance after mounting
|
|
- Supports async operations in runAfterRender callback
|
|
- Automatically handles timing to ensure element is fully rendered |