const template = document.createElement('template')
template.innerHTML = `

<style>
    @font-face {
    font-family: 'KHMenu';
    src: url('font/KHMenu.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}

    div {
    border: 1px solid;
    }
    h2 {
    font-family: KHMenu
    }

    :host {
    background-color: purple
    display: block;
    }


</style>

<div>
   
    <h2> WEPA! </h2>
    <slot name="keyblades">Default text is no slot used in html</slot>
    <slot name="list"> </slot>
    </div>


`;

class Poots extends HTMLElement {
    constructor() {
        super();
        const shadowRoot = this.attachShadow({mode: 'closed'});
        /* let div = document.createElement('div');
        div.textContent = 'WEPA!! MAS POOOOOOOO';
        shadowRoot.append(div); */
        let clone = template.content.cloneNode(true);
        shadowRoot.append(clone);
    }

}

customElements.define('poots-poot', Poots);