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

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);
}