For example,
suppose we have <div is="awesomebutton"></div>
and a Custom Element definition:
document.registerElement('awesomebutton', AwesomeButton)
What is the expected behavior when the is=""
attribute is removed or replaced with a new value?
Per section 7 of the latest Working Draft specification (26 February 2016), it should have no effect on the type of the element:
After a custom element is instantiated, changing the value of the
is
attribute must not affect this element's custom element type.
However the attributeChangedCallback
should still be triggered as normal. (The specification does not exempt the is
attribute from triggering it.) You can observe that behaviour here in a supporting browser (Chrome, or Firefox with the dom.webcomponents.enabled
config flag set):
'use strict';
const prototype = Object.create(HTMLElement.prototype);
prototype.attributeChangedCallback = function(name, oldValue, newValue) {
this.textContent = `my "${name}" attribute changed to "${newValue}"!`;
};
document.registerElement('examp-el', {prototype: prototype, extends: 'div'});
const el = document.createElement('div', 'examp-el');
el.textContent = "I'm an element!";
document.body.appendChild(el);
el.setAttribute('is', "changed once");
el.removeAttribute('is');
el.setAttribute('is', "changed twice");
el.setAttribute('is', "changed thrice");
This specification is not yet standardized and significant changes are coming soon, but I don't expect this behaviour to change. It's still specified by Section 2.3 of the latest version of the Editor's Draft (currently 17 March 2016):
After a custom element is created, changing the value of the
is
attribute does not change the element's behavior.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With