How would you address your new found love?
class ClickButton extends HTMLElement {
constructor() {
super(); // Always call super() first
this.shadow = this.attachShadow({mode:'open'});
const buttonElement = document.createElement('button');
buttonElement.innerHTML = 'Click me';
const myButtonEl = this.shadow.appendChild(buttonElement);
myButtonEl.addEventListener('click', () => {
alert('Button clicked!');
});
this.button = buttonElement;
}
}
customElements.define('click-button', ClickButton);
or
customElements.define('click-button', class extends HTMLElement {
constructor() {
const createElement = (tag, props = {}) => Object.assign(document.createElement(tag), props);
super() // sets AND returns 'this'
.attachShadow({mode:'open'}) // sets AND returns this.shadowRoot
.append(
this.button = createElement( 'button', {
innerHTML: 'Click me',
onclick : (evt) => alert('Button clicked!', this.nodeName)
})
);
}
});