feat: adds instance element access + gets the todo example functional

1 files changed, 6 insertions, 5 deletions

diff --git a/examples/todo-list/style.css b/examples/todo-list/style.css
index b3b9d07..d4cd391 100644
--- a/examples/todo-list/style.css
+++ b/examples/todo-list/style.css
@@ -87,8 +87,10 @@ body * { box-sizing: border-box; }
   width: 100%;
   align-items: center;
 
+  --cssx-on-mount: update(--task-item-id, attr(data-element));
+
   --cssx-on-click: update(--done, if(get-var(--done), "false", "true"));
-  --cssx-on-update: update(checkbox, --checked, if(get-var(--done), true, false));
+  --cssx-on-update: update(":scope [data-element=checkbox]", --checked, if(get-var(--done), true, false));
 
   --cssx-children: div#checkbox div#task-text button#delete-task;
 }
@@ -97,7 +99,7 @@ body * { box-sizing: border-box; }
   flex: 2;
 }
 [data-instance=task-item] [data-element=task-text]::after {
-  content: "[" var(--done) "] " var(--text);
+  content: var(--text);
   padding-left: 0.8rem;
 }
 
@@ -115,11 +117,10 @@ body * { box-sizing: border-box; }
   background-color: transparent;
 
   --cssx-on-update:
-    update(background-color, if(get-var(--checked), get-var(--color-accent), transparent))
-  ;
+    update(background-color, if(get-var(--checked), get-var(--color-accent), transparent));
 }
 
 [data-instance=task-item] [data-element=delete-task] {
   --cssx-text: 'Delete';
-  --cssx-on-click: remove-element(task-item);
+  --cssx-on-click: remove-element(get-var(--task-item-id));
 }