50 lines
953 B
JavaScript
50 lines
953 B
JavaScript
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); |