import { createApp } from 'petite-vue'

import templateItem from './templateItem'
import wishlistItemMounted from './wishlistItem'

/**
 * Custom element for the wishlist app.
 */
class SavetoWishlistItem extends HTMLElement {
  constructor() {
    super()
  }

  connectedCallback() {
    // Create container with v-scope for the app.
    const container = document.createElement('div')
    container.setAttribute('v-scope', '')
    container.innerHTML = templateItem
    this.appendChild(container)

    const app = createApp(wishlistItemMounted())

    // Mount the app.
    app.mount(container)
  }
}

export default SavetoWishlistItem