form_nested_shadow_DOM_form_and_fields_together_in_a_shadow_root.html

Enable keyboard shortcuts

<!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 nested shadow roots -->

<!-- This form is based off of toolkit/components/passwordmgr/test/browser/form_basic.html -->

<span id="outer-wrapper">

  <!-- form and all inputs generated programmatically below -->

</span>

<script>

  const outerWrapper = document.getElementById("outer-wrapper");

  const innerWrapper = document.createElement("span");

  innerWrapper.id = "inner-wrapper";

  const innerShadow = innerWrapper.attachShadow({mode: "closed"});

  const outerShadow = outerWrapper.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";

  innerShadow.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);

  outerShadow.append(innerWrapper);

</script>

</body></html>