Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
<!DOCTYPE html>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<style>
  label {
    display: block;
  }
</style>
  <label>
    name=fname
    <input type="text" name="fname">
  </label>
  <label>
    name=firstname, autocomplete=given-name
    <input type="text" name="firstname" autocomplete="given-name">
  </label>
  <label><div id="fname"></div></label>
  <label><div id="firstname"></div></label>
<script>
  "use strict";
  
  const shadow1 = document.querySelector("#fname").attachShadow({ mode: 'open' });
  shadow1.innerHTML = `shadow root: name=fname
    <input type="text" name="fname">`;
  const shadow2 = document.querySelector("#firstname").attachShadow({ mode: 'open' });
  shadow2.innerHTML = `name=firstname, autocomplete=given-name
    <input type="text" name="firstname" autocomplete="given-name">`;
</script>
Output 300px

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers