index.html

<style>
  body {
    padding: 0;
    margin: 0;
    background: #e2e2e2;
  }
  /* Styles for demo purposes only */
  .demo__container {
    height: 800px;
  }
  .demo__button-box {
    margin: 36px 48px;
  }
  .demo__help-button {
    font-size: 22px;
    padding: 6px 12px;
    min-width: 84px;
    min-height: 48px;
    border-radius: 4px;
    border-color: transparent;
    background: #fff;
    color: #222;
    box-shadow: 0 1px 3px 0 rgba(0,0,0,0.2), 0 1px 1px 0 rgba(0,0,0,0.14), 0 2px 1px -1px rgba(0,0,0,0.12);
    transition: all 0.2s cubic-bezier(.25,.8,.25,1);
  }
  .demo__help-button:hover {
    cursor: pointer;
    box-shadow: 0 4px 10px 0 rgba(0,0,0,0.2);
    background: rgb(241, 241, 241);
  }
  .demo__help-button:focus {
    outline: none;
  }
</style>

<!-- Web component polyfill loader -->
<script src="https://unpkg.com/@webcomponents/webcomponentsjs@2.1.3/webcomponents-loader.js"></script>
<!-- MyUW web components -->
<script type="module">
  import "https://unpkg.com/@myuw-web-components/myuw-app-bar@^1?module";
  import "./dist/myuw-help.mjs";
  window.setCustomPosition = () => {
    document.dispatchEvent(new CustomEvent('set-myuw-help-position', {
      detail: {
        position: {
          left: '100px',
          top: '100px'
        }
      }
    }));
  }
  window.getHelp = () => {
    document.dispatchEvent(new Event('show-myuw-help'));
  }
</script>

<myuw-app-bar theme-name="MyUW" app-name="Help and Feedback">
  <myuw-help myuw-help-title="Help is on the way!" slot="myuw-help" show-button>
    <div slot="myuw-help-content">
      <p>Put whatever content you want here!</p>
      <ul>
        <li>Lists are fine</li>
        <li>So is any other HTML</li>
      </ul>
    </div>
  </myuw-help>
</myuw-app-bar>
<div class="demo__container">
  <div class="demo__button-box">
    <button class="demo__help-button" onclick="getHelp()">You can also click me for help!</button>
    <button class="demo__help-button" onclick="setCustomPosition()">Use a custom position</button>
  </div>
</div>