index.html

<!DOCTYPE html>

<html lang="en">
  <head>
    <title>Elastic Textarea</title>

    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <meta
      name="description"
      content="A web component for progressively-enhanced auto-expanding textareas"
    />

    <script src="/index.js" type="module"></script>

    <style>
      textarea {
        display: block;
      }
    </style>
  </head>

  <body>
    <label for="demo">Type in the textarea below</label>
    <elastic-textarea>
      <textarea id="demo" name="demo"></textarea>
    </elastic-textarea>

    <elastic-textarea>
      <textarea id="demo2" name="demo2" rows="5"></textarea>
      <textarea id="demo3" name="demo3" rows="2">
Base value, bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla</textarea
      >
    </elastic-textarea>
  </body>
</html>