<!DOCTYPE html><html><head><meta charset="utf-8"></head><body>
<!-- Any copyright is dedicated to the Public Domain.
   - http://creativecommons.org/publicdomain/zero/1.0/ -->

<!-- Simple form with form, username and password fields together in a shadow root -->
<!-- This form is based off of toolkit/components/passwordmgr/test/browser/form_basic.html -->
<span id="wrapper">
  <!-- form and all inputs generated programmatically below -->
</span>

<script>
  const wrapper = document.getElementById("wrapper");
  const shadow = wrapper.attachShadow({mode: "closed"});
  const form = document.createElement("form");
  form.id = "form-and-fields-in-a-shadow-root";
  const submitButton = document.createElement("input");
  submitButton.id = "submit";
  submitButton.type = "submit";
  shadow.append(form);
  form.append(submitButton);
  const fields = ["username", "password"];
  for (let field of fields) {
    const inputEle = document.createElement("input");
    inputEle.id = field;
    inputEle.name = field;
    if (field === "password") {
      inputEle.type = field;
    }
    submitButton.before(inputEle);
  }
</script>

</body></html>
