DEV Community

Cover image for Reminder to self (creating a Web Component)
Danny Engelman
Danny Engelman

Posted on • Edited on

Reminder to self (creating a Web Component)

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



Top comments (0)