examples/todo-list/style.css


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

body {
  --cssx-children: todo-container;
}

#todo-container {
  --cssx-children: todo-input todo-list;
  --todo-list: list();
}

#todo-input {
  --cssx-children: input-field submit-btn;
}

#submit-btn {
  --cssx-on-click: update(
    todo-container,
    --todo-list,
    list-append(
      var(--todo-list),
      tuple(get-attr(input-field, value), false)
    )
  );
}
#submit-btn::after {
  content: "Submit";
}

#todo-list {
  --cssx-iter-children: iter(var(--todo-list), --todo-item, todo-item);
}

#todo-item {

}
#todo-item::after {
  content: var(--todo-item);
}