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>Web Components Framework (proof-of-concept)</title>
  <script src="https://raw.github.com/Polymer/platform/stable/platform.min.js"></script>
</head>
<body>
    <element name="test-tag" type="web-element">
      <template>
        <h1>Hello light world!</h1>
      </template>
      <template shadow data="#my-data" data-map="#my-data-map">
        <h1>Hello shadow world! <span id="extra-data"></span></h1>
        <h3>Name: <em id="name"></em></h3>
        <label>Name (press enter to update):</label>
        <input id="name-input" value="Sean Clark <sean@v13inc.com>"/>
        <ul>
          <li id="tags"></li>
        </ul>
      </template>
      <data id="my-data">
      {
        foo: 'This is some extra data',
        tags: ['one', 'two']
      }
      </data>
      <data-map data="#my-data">
      {
        '#extra-data': foo,
        '#tags': tags,
        '#name': this.querySelector('#name-input')
      }
      </data>
    </element>
​
    <test-tag></test-tag>
</body>
</html>
Output

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

Dismiss x
public
Bin info
anonymouspro
0viewers