This content originally appeared on Go Make Things and was authored by Go Make Things
In my video on HTML Web Components, I create a Web Component that makes a very generic “counter component.”
You click a button, and the button tracks how many times it’s been clicked.
customElements.define('count-up', class extends HTMLElement {
constructor () {
// Inherit parent class properties
super();
// Track the number of clicks
this.count = 0;
// Inject the HTML
this.innerHTML = `<button>Clicked ${this.count} Times</button>`;
// Listen for events on the button
this.btn = this.querySelector('button');
this.btn.addEventListener('click', this);
}
handleEvents () {
this.count++;
this.btn.textContent = `Clicked ${this.count} Times`;
}
});
I got a great question in the comments asking why I extend my class with HTMLElement and not HTMLButtonElement.
This comes up a lot! There are two reasons:
- The Web Component itself isn’t a
button. One of it’s child elements is. If I wanted the custom element itself to behave like abutton, I’d also need to add stuff like aroleattribute and additional event listeners. - That’s also unfortunately not how Web Components work. You extend the
HTMLElement, then layer in your custom behavior. You can’t reliably extend other element types withcustomElements.define().
There was a spec in the works that would let you extend native elements with custom functionality using is attribute. Firefox and Chromium moved forward with it, and then the WebKit team straight up refused to implement it, effectively killing the spec.
My understanding is that there’s a replacement spec in the works that WebKit is allegedly onboard with, but I don’t know much about it at this time as it’s nowhere near production ready.
This content originally appeared on Go Make Things and was authored by Go Make Things
Go Make Things | Sciencx (2024-07-09T14:30:00+00:00) Why not extend the button element?. Retrieved from https://www.scien.cx/2024/07/09/why-not-extend-the-button-element/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.