Anmäl dig till Roborock Challenge!
Permalänk

Custom elements

Hej jag har precis börjat lära mig om custom elements och web components så jag är fortfarande väldigt ny och förvirrad kring ämnet. Jag har en uppgift där jag ska skapa ett element som använder sig av Date-objektet och ger dagens datum när den anropas, men jag får det inte att fungera. Jag vill att datumet ska kapslas in i time-elementet. Det här är vad jag har skrivit hittills:

const template = document.createElement('template')
template.innerHTML = `
<style>
<style>
<time id="container">
</time>
<p></slot></p>
</div> `

customElements.define('the-time',
class extends HTMLElement {
constructor () {
super()
this.attachShadow({mode: 'open'}).appendChild(template.content.cloneNode(true))
this.shadowRoot.querySelector('#container').innerHTML = this.getAttribute('datetime')
this.date = 0
}

getDate() {
if (this.date == 0) {
this.shadowRoot.querySelector('#container').innerText = Date.now()
}
}

})