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

readme.hints.md

@@ -34,16 +34,22 @@ import * as demoTools from '@design.estate/dees-wcctools/demotools';
 
 // In your demo function:
 demo: () => html`
-  <dees-demowrapper .runAfterRender=${(children: HTMLCollection) => {
-    // Access all slotted elements
-    const firstElement = children[0] as HTMLElement;
-    firstElement.setAttribute('data-demo', 'true');
-    console.log('All slotted elements:', children);
+  <dees-demowrapper .runAfterRender=${(wrapper) => {
+    // Use querySelector for specific elements
+    const myElement = wrapper.querySelector('my-custom-element');
+    myElement?.setAttribute('data-demo', 'true');
     
-    // Work with multiple elements
-    Array.from(children).forEach(child => {
-      console.log('Element rendered:', child);
+    // Access all children
+    console.log('All children:', wrapper.children);
+    
+    // Use querySelectorAll for multiple elements
+    wrapper.querySelectorAll('div').forEach(div => {
+      console.log('Found div:', div);
     });
+    
+    // Full DOM API available
+    const firstChild = wrapper.firstElementChild;
+    const hasClass = wrapper.querySelector('.my-class');
   }}>
     <my-custom-element></my-custom-element>
     <div>Additional content</div>
@@ -53,7 +59,8 @@ demo: () => html`
 
 **Features:**
 - Wraps demo elements without affecting layout (uses `display: contents`)
-- Provides access to ALL slotted elements via HTMLCollection after mounting
+- Provides the wrapper element itself with full DOM API access
+- Use querySelector/querySelectorAll for powerful element selection
+- Access children via wrapper.children property
 - Supports async operations in runAfterRender callback
-- Automatically handles timing to ensure elements are fully rendered
-- Can handle multiple slotted elements, not just the first one
+- Automatically handles timing to ensure elements are fully rendered