🔤

docs/components/examples/signals/debugging-dom.js

@@ -1,35 +1,38 @@
-import { el, assign } from "deka-dom-el";
+import { el, on, scope } from "deka-dom-el";
 import { S } from "deka-dom-el/signals";
 
 // Create a component with reactive elements
 function ReactiveCounter() {
-  const count = S(0);
-  
-  // Elements created with el() have data-dde attribute
-  const counter = el('div', { 
-    id: 'counter',
-    // This element will have __dde_reactive property
-    textContent: count 
-  });
-  
-  const incrementBtn = el('button', {
-    textContent: 'Increment',
-    onclick: () => count.set(count.get() + 1)
-  });
-  
-  // Dynamic section with __dde_signal property
-  const counterInfo = S.el(count, value => 
-    el('p', `Current count is ${value}`)
-  );
-  
-  return el('div').append(
-    counter,
-    incrementBtn,
-    counterInfo
-  );
+	const count = S(0);
+		scope.host(on.connected(ev=>
+				console.log(ev.target.__dde_reactive)
+		));
+
+	const counter = el('div', {
+		// This element will be added into the __dde_reactive property
+		textContent: count,
+	});
+
+	const incrementBtn = el('button', {
+		textContent: 'Increment',
+		onclick: () => count.set(count.get() + 1)
+	});
+
+	// Dynamic section will be added into __dde_signal property
+	const counterInfo = S.el(count, value =>
+		el('p', `Current count is ${value}`)
+	);
+
+	return el('div', { id: 'counter' }).append(
+		counter,
+		incrementBtn,
+		counterInfo
+	);
 }
+document.body.append(
+	el(ReactiveCounter),
+);
 
 // In DevTools console:
-// document.querySelectorAll('[data-dde]'); // Find all elements created with deka-dom-el
-// const counter = document.querySelector('#counter');
-// console.log(counter.__dde_reactive); // See reactive bindings
+const counter = document.querySelector('#counter');
+setTimeout(()=> console.log(counter.__dde_reactive), 1000); // See reactive bindings

docs/global.css.js

@@ -133,6 +133,7 @@ body {
 		"sidebar"
 		"content";
 	min-height: 100vh;
+	margin: 0;
 }
 
 ::selection {

docs/layout/head.html.js

@@ -14,7 +14,10 @@ ${host} {
 	background-color: var(--primary);
 	color: white;
 	box-shadow: var(--shadow);
-	min-height: var(--header-height);
+	min-height: calc(var(--header-height) - 1em);
+	--_m: .75em;
+	margin: var(--_m) var(--_m) 0 var(--_m);
+	border-radius: var(--border-radius);
 }
 
 ${host} .header-title {