<o-demo-bar name="Material Demo">
         <o-demo-case name="Buttons Click">
           <template>
          <button onClick="showMe(event)">click me </button>
              <script> 
                  function showMe(evt){
                      alert(evt);
                  }
              </script>
               <template>
         <o-demo-case>

        <o-demo-case name="Buttons Alert">
           <template>
           <button onClick="showMe2(event)">click me </button>
              <script> 
                  function showMe2(evt){
                      alert(evt);
                  }
              </script>
               <template>
         <o-demo-case>
    </o-demo-bar>

    <o-demo-bar name="Material Demo">
      <o-demo-case name="Placeholders Rounded Avatar">
          <template>
          <script src="https://unpkg.com/@o-rango/[email protected]/dist/o-content-placeholder.js"></script>

          <style>
              // Place Your Styles
              .container {
                background-color: white;
                width: 90%;
                margin: auto auto;
                padding: 20px 25px 25px 20px;
                margin-bottom: 20px;
              }
            </style>
             <div class="container">
                <o-content-placeholder-img size="55" animate="true" format="circle"></o-content-placeholder-img>
                <o-content-placeholder-block line-height="10" random-size="true" animate="true" lines="5"></o-content-placeholder-block>
            </div>
          </template>
    </o-demo-case>
          ... all your demo cases 
    </o-demo-bar>

    <o-demo-bar name="Material Demo" events="myEvents,myAnotherEvent">
    </o-demo-bar>