feat: adds checkbox that doesn't work in example

2 files changed, 27 insertions, 5 deletions

diff --git a/examples/todo-list/style.css b/examples/todo-list/style.css
index 5316d41..b746829 100644
--- a/examples/todo-list/style.css
+++ b/examples/todo-list/style.css
@@ -78,15 +78,20 @@
 
 [data-instance=task-item] {
   --text: "default text";
-  --checked: "false";
+  --done: "false";
 
   padding: 1rem;
   cursor: pointer;
 
-  --cssx-on-click: update(--checked, if(get-var(--checked), "false", "true"));
+  --cssx-on-click: update(--done, if(get-var(--done), "false", "true"));
+  --cssx-on-update:
+    update(checkbox, --checked, if(get-var(--done), true, false))
+  ;
+
+  --cssx-children: div#checkbox;
 }
 [data-instance=task-item]::after {
-  content: "[" var(--checked) "] " var(--text);
+  content: "[" var(--done) "] " var(--text);
 }
 
 [data-instance=task-item]:not(:first-child) {
@@ -95,3 +100,15 @@
   border-top: 1px solid var(--color-gray);
 }
 
+#checkbox {
+  --checked: false;
+
+  width: 18px;
+  height: 18px;
+  border: 2px solid gray;
+  background-color: transparent;
+
+  --cssx-on-update:
+    update(background-color, if(get-var(--checked), get-var(--color-accent), transparent))
+  ;
+}
diff --git a/src/index.ts b/src/index.ts
index 765f676..aba1491 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -91,11 +91,16 @@ const getEvalActions = (
     getVariable: async varName => getPropertyValue($element, varName),
     updateVariable: async (targetId, varName, value) => {
       const $el = targetId ? document.getElementById(targetId) : $element
+      const isCustomProp = varName.startsWith('--')
       if ($el) {
         const prevValue = getPropertyValue($el, varName)
-        ;($el as any).style.setProperty(varName, JSON.stringify(value))
+        if (isCustomProp) {
+          ;($el as any).style.setProperty(varName, JSON.stringify(value))
+        } else {
+          ;($el as any).style[varName] = value
+        }
 
-        if (JSON.stringify(value) !== prevValue) {
+        if (JSON.stringify(value) !== prevValue && isCustomProp) {
           const detail = { name: varName, value, prevValue }
           $el.dispatchEvent(new CustomEvent(CSSX_ON_UPDATE_EVENT, { detail }))
         }