design.estate/dees-wcctools
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(demotools): enhance runAfterRender to provide full DOM API access and improve element selection

Browse Source
This commit is contained in:
Juergen Kunz
2025-06-16 14:45:19 +00:00
parent 578f87a8f9
commit d4fce8a939
4 changed files with 56 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
ts_demotools/demotools.ts
View File

@ -3,7 +3,7 @@ import { DeesElement, customElement, html, css, property, type TemplateResult }
@customElement('dees-demowrapper')
export class DeesDemoWrapper extends DeesElement {
@property({ attribute: false })
public runAfterRender: (children: HTMLCollection) => void | Promise<void>;
public runAfterRender: (wrapperElement: DeesDemoWrapper) => void | Promise<void>;
public static styles = [
css`
@ -25,12 +25,13 @@ export class DeesDemoWrapper extends DeesElement {
// Wait a bit for slotted content to render
await new Promise(resolve => setTimeout(resolve, 50));
// Get all slotted elements
const slottedElements = this.children;
if (slottedElements.length > 0 && this.runAfterRender) {
// Call the runAfterRender function with all slotted elements
// Check if there are slotted elements and runAfterRender is defined
if (this.children.length > 0 && this.runAfterRender) {
// Call the runAfterRender function with the wrapper element itself
// Note: querySelector/querySelectorAll will work on slotted content
// because slotted elements remain in the light DOM as children
try {
await this.runAfterRender(slottedElements);
await this.runAfterRender(this);
} catch (error) {
console.error('Error in runAfterRender:', error);
}