import './style.css'
import typescriptLogo from './typescript.svg'

class EmbeddedNode extends HTMLElement {
  constructor() {
    super()
    const shadow = this.attachShadow({mode: 'open'})
    shadow.innerHTML = '<div>This is an Embedded Node</div>'
  }
}

document.addEventListener('DOMContentLoaded', function () {
  document.querySelector<HTMLDivElement>('#app')!.innerHTML = `
  <div>
    <a href="https://vitejs.dev" target="_blank">
      <img src="/vite.svg" class="logo" alt="Vite logo" />
    </a>
    <a href="https://www.typescriptlang.org/" target="_blank">
      <img src="${typescriptLogo}" class="logo vanilla" alt="TypeScript logo" />
    </a>
    <h1>Vite + TypeScript</h1>
    <div class="card">
      <embedded-node></embedded-node>
      <embedded-node>Some Content Here</embedded-node>
    </div>
    <p class="read-the-docs">
      Click on the Vite and TypeScript logos to learn more
    </p>
  </div>
`
  window.customElements.define('embedded-node', EmbeddedNode)

})