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>
    <!-- the polyfill -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/1.0.1/webcomponents-lite.js"></script>
​
    <!-- our custom element import -->
    <link rel="import" href="https://output.jsbin.com/sodazew">
    
    <style>
      my-element {
        --name-border-style: brown;
      }
    </style>
  </head>
​
  <body>
    <my-element nickname="Ada">
      <div>Lovelace</div>
    </my-element>
​
    <p><button id="show-message">Show message</button><p>
​
    <form id="change-attr">
      <input name="newname" type="text" placeholder="New name">
      <button>Change by attribute</button>
    </form>
    <form id="change-prop">
      <input name="newname" type="text" placeholder="New name">
      <button>Change by property</button>
    </form>
​
    <script>
      const myelement = document.querySelector('my-element');
      const messageButton = document.querySelector('#show-message');
​
      messageButton.addEventListener('click', () => {
         myelement.showMessage();
      });
​
      const formAttr = document.querySelector('#change-attr');
      formAttr.addEventListener('submit', (event) => {
        event.preventDefault();
​
        myelement.setAttribute('nickname', event.target.newname.value);
      });
​
      const formProp = document.querySelector('#change-prop');
      formProp.addEventListener('submit', (event) => {
        event.preventDefault();
​
        myelement.nickname = event.target.newname.value;
      });
    </script> 
  </body>
</html>
Output

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

Dismiss x
public
Bin info
lamplightdevpro
0viewers