tests/fixtures/todo-app/index.html


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
39
40
41

<html lang="en">
  <head>
    <title>Task destroyer</title>
    <meta charset="UTF-8" />
    <style>
      body {
        --cssx-children: form#task-input-form #task-list;
      }

      #task-input-form {
        --cssx-on-submit:
          prevent-default()
          add-children(task-list,
            instance(li#task-item, map(--text: attr(text-input, 'value')))
          )
        ;

        --cssx-children:
          input#text-input[data-testid="add-task-input"]
          button#create-task-btn[type="submit"][data-testid="add-task-btn"]
        ;
      }

      #text-input {}
      #create-task-btn {
        --cssx-text: "Submit";
      }

      [data-instance="task-item"] {
        --text: default text;
        --checked: 0;

        --cssx-on-mount: set-attr('data-testid', attr(id));
      }
      [data-instance="task-item"]::after {
        content: var(--text);
      }
    </style>
  </head>
  <body></body>
</html>