How can my custom-element / web-component detect a DISABLED attribute change?
static get observedAttributes() {
return ['checked', 'disabled', 'value'];
}
My attributeChangedCallback() is not called?
You can declare disabled
as getter/setter property on your Web Component
For the elements that do not have a disabled
property by default:
https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/disabled
<my-element disabled ></my-element>
<script>
function log(...args) {
console.log(...args)
}
customElements.define('my-element',
class extends HTMLElement {
static get observedAttributes(){
return ["disabled"];
}
attributeChangedCallback(name, oldValue, newValue){
log("attributeChanged",name,oldValue,newValue)
}
connectedCallback() {
log("connectedCallback");
this.disabled = !this.disabled;
};
get disabled(){
log("GET disabled", this.hasAttribute("disabled"));
return this.hasAttribute("disabled");
}
set disabled(v){
log("SET disabled", v);
this.toggleAttribute("disabled",v);
}
});
</script>