src/index.html

<!DOCTYPE html>
<html dir="ltr" lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0">
  <title>Stencil Component Starter</title>

  <script type="module" src="./build/css3pattern.esm.js"></script>
  <script nomodule src="./build/css3pattern.js"></script>
  <style>
    body > *:not(.patterns) {
      margin-left: 15px;
    }

    .patterns {
      display: flex;
      flex-wrap: wrap;
    }

    css-pattern {
      padding: 15px;
      --width: 15vw;
      --height: 15vh;
    }

    table, th, td {
      border: 1px solid black;
      border-collapse: collapse;
    }

    th, td {
      padding: 5px 15px 5px 5px;
      text-align: left;
    }
  </style>
</head>
<body onload="seedPatterns()">

  <h2>Available Patterns</h2>
  <p>All available patterns that this component supports.</p>
  <div class="patterns">
    <!-- Generated by JS
    <css-pattern pattern="half-rombes"></css-pattern>
    <css-pattern pattern="zig-zag"></css-pattern>
    <css-pattern pattern="carbon-fibre"></css-pattern>
    <css-pattern pattern="brady-bunch"></css-pattern>
    ... -->
  </div>

  <h2>Pattern by name (example)</h2>
  <p>Displays always the same pattern for the given input name.</p>
  <div class="patterns">
    <css-pattern pattern-for="John Doe"></css-pattern>
    <css-pattern pattern-for="Vessel"></css-pattern>
    <css-pattern pattern-for="Bannanas"></css-pattern>
  </div>

  <h2>Available pattern objects</h2>
  <table id="patternList">
    <tr>
      <th>Title</th>
      <th>Code</th>
      <th>Author</th>
      <th>Author URL</th>
    </tr>
  </table>

  <h2>Source Code</h2>
  <p>Source code can be found on <a href="https://github.com/jwillmer/pattern-component">GitHub: jwillmer/pattern-component</a></p>

  <template id="patternObject">
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
  </template>

  <script type="text/javascript">
    async function seedPatterns() {
      const patternElement = document.getElementsByTagName("css-pattern")[0];
      await patternElement.componentOnReady();
      const patternContainer = document.getElementsByClassName("patterns")[0];
      const patterns = await patternElement.getAllAvailablePatterns();
      const patternList = document.querySelector('#patternList');
      const template = document.querySelector('#patternObject');

      patterns.forEach(pattern => {
        const element = document.createElement("css-pattern");
        element.setAttribute('pattern', pattern.name);
        patternContainer.appendChild(element);

        var clone = template.content.cloneNode(true);
        var td = clone.querySelectorAll("td");
        td[0].textContent = pattern.title;
        td[1].textContent = pattern.name;
        td[2].textContent = pattern.author;
        td[3].textContent = pattern.authorUrl;
        patternList.appendChild(clone);
      });
    }
  </script>

</body>
</html>