Source code
Revision control
Copy as Markdown
Other Tools
<!DOCTYPE html><html><head><meta charset="utf-8"></head><body>
<!-- Any copyright is dedicated to the Public Domain.
<!-- Page with multiple forms containing the following Shadow DOM variants: -->
<!-- Case 1: Each field (username and password) in its own shadow root -->
<!-- Case 2: Both fields (username and password) together in a shadow root with a form ancestor -->
<!-- Case 3: Form and fields (username and password) together in a shadow root -->
<span id="outer-wrapper">
</span>
<script>
const outerWrapper = document.getElementById("outer-wrapper");
const outerShadow = outerWrapper.attachShadow({mode: "closed"});
function makeFormlessOuterForm(scenario) {
const fields = ["username", "password"];
for (let field of fields) {
const inputEle = document.createElement("input");
inputEle.id = `${field}-${scenario}`;
inputEle.name = `${field}-${scenario}`;
if (field === "password") {
inputEle.type = field;
}
outerShadow.append(inputEle);
}
const submitButton = document.createElement("input");
submitButton.id = `submit-${scenario}`;
submitButton.type = "submit";
outerShadow.append(submitButton);
}
function makeFormEachFieldInItsOwnShadowRoot(scenario) {
const form = document.createElement("form");
form.id = scenario;
const submitButton = document.createElement("input");
submitButton.id = `submit-${scenario}`;
submitButton.type = "submit";
form.append(submitButton);
const fields = ["username", "password"];
for (let field of fields) {
const inputEle = document.createElement("input");
inputEle.id = `${field}-${scenario}`;
inputEle.name = `${field}-${scenario}`;
if (field === "password") {
inputEle.type = field;
}
const wrapper = document.createElement("span");
wrapper.id = `wrapper-${field}-${scenario}`;
const shadow = wrapper.attachShadow({mode: "closed"});
shadow.append(inputEle);
submitButton.before(wrapper);
}
outerShadow.append(form);
}
function makeFormBothFieldsTogetherInAShadowRoot(scenario) {
const form = document.createElement("form");
form.id = scenario;
const submitButton = document.createElement("input");
submitButton.id = `submit-${scenario}`;
submitButton.type = "submit";
form.append(submitButton);
const wrapper = document.createElement("span");
wrapper.id = `wrapper-${scenario}`;
const shadow = wrapper.attachShadow({mode: "closed"});
const fields = ["username", "password"];
for (let field of fields) {
const inputEle = document.createElement("input");
inputEle.id = `${field}-${scenario}`;
inputEle.name = `${field}-${scenario}`;
if (field === "password") {
inputEle.type = field;
}
shadow.append(inputEle);
}
submitButton.before(wrapper);
outerShadow.append(form);
}
function makeFormFormAndFieldsTogetherInAShadowRoot(scenario) {
const wrapper = document.createElement("span");
wrapper.id = `wrapper-${scenario}`;
const shadow = wrapper.attachShadow({mode: "closed"});
const form = document.createElement("form");
form.id = scenario;
shadow.append(form);
const submitButton = document.createElement("input");
submitButton.id = `submit-${scenario}`;
submitButton.type = "submit";
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(wrapper);
}
makeFormlessOuterForm("formless-case-2");
makeFormEachFieldInItsOwnShadowRoot("form-case-1");
makeFormBothFieldsTogetherInAShadowRoot("form-case-2");
makeFormFormAndFieldsTogetherInAShadowRoot("form-case-3");
</script>
</body></html>