example/index.html

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <title>TemplateTemplate: Examples</title>

  <style>
    body {
      color: #333;
      font-family: sans-serif;
      line-height: 1.5;
      padding: 3rem;
    }

    a {
      color: #c00;
      text-decoration: underline;
    }

    a:focus,
    a:hover {
      color: #a00;
    }

    table {
      border-collapse: collapse;
      width: 100%;
    }

    caption {
      font-size: 1.25rem;
      font-weight: bold;
      margin-bottom: 0.5rem;
      text-align: left;
    }

    thead {
      background-color: #eee;
      border-bottom: 0.25rem solid #ccc;
    }

    tbody tr {
      border-bottom: 0.0625rem solid #ccc;
    }

    tr:hover {
      background-color: #fafafa;
    }

    th,
    td {
      padding: 0.75rem 0.5rem 0.5rem;
    }

    th {
      font-weight: bold;
      text-align: left;
    }
  </style>
</head>
<body>

  <h1>TemplateTemplate: Example</h1>

  <table id="projects">
    <caption>A table of open source projects.</caption>
    <thead>
      <tr>
        <th scope="col">Name</th>
        <th scope="col">Author</th>
        <th scope="col">URL</th>
        <th scope="col">Languages</th>
      </tr>
    </thead>
    <tbody></tbody>
  </table>

  <template id="row-template">
    <tr>
      <th class="name" scope="row"></th>
      <td class="author"></td>
      <td class="url"></td>
      <td class="languages"></td>
    </tr>
  </template>

  <template id="anchor-template">
    <a></a>
  </template>

  <script type="module">
    import TemplateTemplate from "../index.js";

    const anchor = document.createElement("a");

    anchor.href = "https://sixtwothree.org";
    anchor.textContent = "Jason Garber";

    document.querySelector("#projects tbody").append(
      TemplateTemplate(document.querySelector("#row-template"), {
        ".name": "TemplateTemplate",
        ".author": "Jason Garber",
        ".url": "https://github.com/jgarber623/TemplateTemplate",
        ".languages": "JavaScript",
      }),
      TemplateTemplate("#row-template", {
        "th": "CashCash",
        "th + td": anchor,
        ".url": ["https://github.com/jgarber623/CashCash", {
          "style": "font-style: italic;",
        }],
        "td:last-child": TemplateTemplate("#anchor-template", {
          "a": ["JavaScript", {
            "href": "https://github.com/search?q=language%3AJavaScript",
            "target": "_blank",
          }],
        }),
      })
    );
  </script>

</body>
</html>