class MyComponent extends HTMLElement {
  constructor() {
    super()
    this.attachShadow({ mode: 'open' })
  }

  connectedCallback() {
    this.render()
  }

  render() {
    this.shadowRoot.innerHTML = `
      <style>
        :host {
          position: relative;
          display: inline-block;
        }
        .popup-text {
          visibility: hidden;
          width: 160px;
          background-color: #555;
          color: #fff;
          text-align: center;
          padding: 8px 0;
          position: absolute;
          z-index: 1;
        }
        :host(.show) .popup-text {
          visibility: visible;
          animation: fadeIn 1s;
        }
        @keyframes fadeIn {
          from {opacity: 0;}
          to {opacity:1 ;}
        }
      </style>
      <span class="popup-text">
        Tole je testni popup
        <slot></slot>
      </span>
    `
  }

  toggle() {
    this.classList.toggle('show')
  }

  changeText(text) {
    this.shadowRoot.querySelector('.popup-text').textContent = text
  }
}

customElements.define('my-component', MyComponent)