127 lines
3.1 KiB
TypeScript
127 lines
3.1 KiB
TypeScript
import {
|
|
DeesElement,
|
|
customElement,
|
|
type TemplateResult,
|
|
html,
|
|
property,
|
|
css,
|
|
} from '@design.estate/dees-element';
|
|
|
|
// Helper component for nesting
|
|
@customElement('test-nested-wrapper')
|
|
class TestNestedWrapper extends DeesElement {
|
|
public render() {
|
|
return html`
|
|
<div style="border: 1px dashed #ccc; padding: 10px; margin: 5px;">
|
|
<slot></slot>
|
|
</div>
|
|
`;
|
|
}
|
|
}
|
|
|
|
// The actual test element deeply nested
|
|
@customElement('test-nested-target')
|
|
class TestNestedTarget extends DeesElement {
|
|
@property({ type: String })
|
|
public message: string = 'I am deeply nested!';
|
|
|
|
@property({ type: Number })
|
|
public depth: number = 0;
|
|
|
|
@property({ type: Boolean })
|
|
public found: boolean = false;
|
|
|
|
public static styles = [
|
|
css`
|
|
:host {
|
|
display: block;
|
|
padding: 15px;
|
|
background: #e1f5fe;
|
|
border: 2px solid #0288d1;
|
|
border-radius: 4px;
|
|
margin: 5px;
|
|
}
|
|
.info {
|
|
font-family: monospace;
|
|
color: #01579b;
|
|
}
|
|
`
|
|
];
|
|
|
|
public render() {
|
|
return html`
|
|
<div class="info">
|
|
<strong>Nested Target Element</strong><br>
|
|
Message: ${this.message}<br>
|
|
Depth: ${this.depth}<br>
|
|
Found by properties panel: ${this.found ? '✅' : '❌'}
|
|
</div>
|
|
`;
|
|
}
|
|
}
|
|
|
|
@customElement('test-nested')
|
|
export class TestNested extends DeesElement {
|
|
public static demo = () => html`
|
|
<test-nested></test-nested>
|
|
`;
|
|
|
|
@property({ type: String })
|
|
public testId: string = 'nested-test';
|
|
|
|
public static styles = [
|
|
css`
|
|
:host {
|
|
display: block;
|
|
padding: 20px;
|
|
background: #f5f5f5;
|
|
border: 2px solid #999;
|
|
border-radius: 8px;
|
|
}
|
|
.explanation {
|
|
background: #fff;
|
|
padding: 10px;
|
|
border-radius: 4px;
|
|
margin-bottom: 10px;
|
|
}
|
|
.structure {
|
|
background: #f0f0f0;
|
|
padding: 10px;
|
|
border-radius: 4px;
|
|
}
|
|
`
|
|
];
|
|
|
|
public render() {
|
|
return html`
|
|
<div class="explanation">
|
|
<h3>Nested Structure Test</h3>
|
|
<p>The actual element with properties is nested deep inside multiple layers:</p>
|
|
</div>
|
|
|
|
<div class="structure">
|
|
<test-nested-wrapper>
|
|
<div style="padding: 10px; background: #ffe;">
|
|
<test-nested-wrapper>
|
|
<div style="padding: 10px; background: #efe;">
|
|
<test-nested-wrapper>
|
|
<div style="padding: 10px; background: #eef;">
|
|
<!-- The target element is here, 3 levels deep -->
|
|
<test-nested-target
|
|
.message=${'Found me at depth 3!'}
|
|
.depth=${3}
|
|
></test-nested-target>
|
|
</div>
|
|
</test-nested-wrapper>
|
|
</div>
|
|
</test-nested-wrapper>
|
|
</div>
|
|
</test-nested-wrapper>
|
|
</div>
|
|
|
|
<div style="margin-top: 10px; font-style: italic; color: #666;">
|
|
Properties panel should find the test-nested-target element despite the deep nesting.
|
|
</div>
|
|
`;
|
|
}
|
|
} |