Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

What is the expected behavior of removing the is="" attribute from Custom Element?

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?

like image 825
trusktr Avatar asked Mar 12 '23 21:03

trusktr


1 Answers

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.

like image 135
Jeremy Avatar answered Apr 28 '23 15:04

Jeremy