Reminder to self (creating a Web Component)
Danny Engelman

Danny Engelman @dannyengelman

About: Online since 1990 Yes! I started with Gopher. I do modern Web Component Development with technologies supported by **all** WHATWG partners (Apple, Google, Microsoft & Mozilla)

Location:
Amsterdam, the Netherlands
Joined:
Oct 20, 2018

Reminder to self (creating a Web Component)

Publish Date: Sep 2 '24
8 0
connectedCallback() {
    const template = `
<button class="countdown-start">Start the countdown</button>
<span class="seconds-left"></span>`;
    this.innerHTML = template;
    this.button = this.querySelector('.countdown-start');
    this.secondsDisplay = this.querySelector('.seconds-left');
    this.button.addEventListener('click', () => this.handleClick());
}
Enter fullscreen mode Exit fullscreen mode

can be written

  • without HTML
  • without classes
  • without querySelector
  • without addEventListener
connectedCallback() {
  const createElement=(t,p={})=>Object.assign(document.createElement(t),p);
  this.append(
    this.button = createElement("button", {
       textContent: "Start the Countdown",
       onclick: () => this.handleClick()
    }),
    this.secondsDisplay = createElement("span")
  );
}
Enter fullscreen mode Exit fullscreen mode



Comments 0 total

    Add comment