JSFiddle - React, Tailwind, and code Playground

by Anderson Carlos Woss

HTML

<template id="input-template">
  <input type="text" name="input-shadow-dom" value="Valor na Shadow DOM">
</template>

<form id="form" action="" method="get">
  <div id="input-shadow"></div>
  <input type="text" name="input-light-dom" value="Valor na Light DOM">
  <button id="send-button" type="button">Enviar</button>
</form>

<div id="result"></div>

CSS

input {
  display: block;
  margin: 10px 0;
}

JavaScript

const form = document.getElementById("form");
const send = document.getElementById("send-button");
const input = document.getElementById("input-shadow").createShadowRoot();
const template = document.getElementById("input-template");
const result = document.getElementById("result");

let clone = document.importNode(template.content, true);
input.appendChild(clone);

send.addEventListener("click", event => {
  let data = new FormData(form);
  
  for (const key of data.keys()) {
    let p = document.createElement("p");
    p.textContent = key + " = " + data.get(key);
    result.appendChild(p);
  }
});