Looking for a way to utilize the native setters and getters for an extended HTMLButtonElement, particularly focusing on the 'disabled' property.
You can find more information about the property here: https://developer.mozilla.org/en-US/docs/Web/API/HTMLButtonElement
An example code snippet can be accessed through the following link: http://codepen.io/anon/pen/RWmKaw?editors=001
Highlighted excerpt from the provided link:
'use strict';
class TestButton extends HTMLButtonElement {
attachedCallback() {
this.appendChild(document.createTextNode('test'));
this.addEventListener('click', (event) => {
this.customFun();
});
}
customFun() {
alert('setting myself as disabled.');
this.disabled = true;
}
}
document.registerElement('test-button', TestButton);
document.body.appendChild(document.createElement('test-button'));
Encountering an error when attempting to access the disabled property during set or get operations:
Uncaught TypeError: Illegal invocation(anonymous function) @ pen.js:33
While overriding the setter and getter for TestButton is possible, it doesn't address the root issue, only treats the symptom.
Alternatively, experimenting with the syntax below has been tried: codepen: http://codepen.io/anon/pen/NGVddj?editors=001
'use strict';
class TestButton {
attachedCallback() {
this.appendChild(document.createTextNode('test'));
this.addEventListener('click', (event) => {
this.customFun();
});
}
customFun() {
alert('setting myself as disabled.');
this.disabled = true;
}
}
document.registerElement('test-button', {prototype:TestButton, extends:'button'});
let myButton = document.createElement('button', 'test-button');
myButton.setAttribute('is', 'test-button');
myButton.customFun();
document.body.appendChild(myButton);
This attempt led to the removal of custom element functions and triggered the error message:
Uncaught TypeError: myButton.customFun is not a function