Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <template id="XMenuTemplate">
    <style>
      :host {
        display: inline-block;
        position: relative;
        padding: 0.5em;
        margin: 0.5em;
        
        background-color: #aaa;
      }
      
      :host(:focus) {
        background-color: #ccc;
      }
      
      li {
        display: inline-block;
        position: relative;
        padding: 0.5em;
        margin: 0.5em;
        
        background-color: #eee;
      }
      
      li:focus {
        background-color: #fff;
      }
    </style>
    <li tabindex="0">Item One</li>
    <li tabindex="0">Item Two</li>
    <li tabindex="0">Item Three</li>
  </template>
  
  <section>
    <h2>Document Focus State</h2>
    <pre id="FocusedElement">None</pre>
  </section>
  
  <section>
    <h2>tabstop="true"</h2>
    <x-menu id="XMenu1" tabindex="0"></x-menu>
  </section>
  
  <section>
    <h2>tabstop="false"</h2>
    <x-menu id="XMenu2" tabindex="0" tabstop="false"></x-menu>
    <x-menu id="XMenu3" tabindex="0" tabstop="false"></x-menu>
  </section>
  
  <section>
    <h2>tabstop="false", sibling subtree</h2>
    <x-menu id="XMenu4" tabindex="0" tabstop="false"></x-menu>
  </section>
  
  <section>
    <em>Note: All menus are tabindex="0"</em>
  </section>
</body>
</html>
Output

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

Dismiss x
public
Bin info
cdatapro
0viewers