<granite-dynamic-element 
  name="h1" slot="Hello my friend" 
  attr1="passed to child" 
  another-random-attribute="also passed to child">
</granite-dynamic-element>
          

<granite-dynamic-element 
    name="a" slot="Link to granite-dynamic-element GitHub" 
    href="https://github.com/LostInBrittany/granite-dynamic-element" 
</granite-dynamic-element>
          

<granite-alert level="success">

  <link 
      rel="import"
      href="../../granite-alert/granite-alert.html">

  <template is="dom-bind" id="dom-bind">
      <granite-dynamic-element 
          name="granite-alert" 
          slot="Alert! Alert!" 
          level$="[[level]]">
      </granite-dynamic-element> 
  </template>

  <script>
    var autobind = document.querySelector('#dom-bind');

    // The dom-change event signifies when the template 
    // has stamped its DOM.
    autobind.addEventListener('dom-change', function() {
    console.log('template is ready.')
    });

    // set data property on dom-bind
    let changeLevel = () => { 
      window.setTimeout(() => {
        console.log('current level', autobind.level);
        if (autobind.level != 'success') {
            autobind.level = 'success';
        } else {
            autobind.level = 'warning';
        }
        changeLevel();
      }, 2000);
    };
    changeLevel();
  </script>   
</granite-alert>