docs/index.html

<!doctype html>

<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="color-scheme" content="light dark" />
    <title>&lt;baseline-status> Demo</title>
    <script type="module" src="../baseline-status.min.js"></script>
    <style>
      body {
        font-family: Roboto, sans-serif;
        background-color: light-dark(#fff, #222);
      }
      baseline-status {
        margin-block-end: 1rem;
      }
    </style>
  </head>
  <body>
    <h1>&lt;baseline-status&gt; demo</h1>
    <baseline-status featureId="array"></baseline-status>
    <baseline-status featureId="anchor-positioning"></baseline-status>
    <baseline-status featureId="animation-composition"></baseline-status>
    <baseline-status featureId="abs-sign"></baseline-status>
    <baseline-status featureid="i-dont-exist"></baseline-status>
    <baseline-status></baseline-status>
    <label for="dynamic-feature-input">Feature id</label>
    <input type="text" id="dynamic-feature-input" />
    <baseline-status id="dynamic-feature-output"></baseline-status>
    <script>
      const input = document.getElementById("dynamic-feature-input");
      const output = document.getElementById("dynamic-feature-output");
      input.addEventListener("change", (event) => {
        output.setAttribute("featureId", event.target.value);
      });
    </script>
  </body>
</html>