class CustomNavigationBar extends HTMLElement {
  constructor() {
      super()
      const shadowRoot = this.attachShadow({mode: 'open'})
      shadowRoot.innerHTML = `
        <style>   
          div.navibar {
            align-items: center;
            display: flex;
            flex-wrap: nowrap;
            justify-content: space-around;
            background-color: #ccc;
            margin: 0;
            width: 100%;
          }
          ::slotted(a) {
            text-align: center;
            margin: 10px;
            height: 10vh;
         }
        </style>
        <div class="navibar">
          <slot></slot>
        </div>`
  }

}

customElements.define('navigation-bar', CustomNavigationBar)