1449489 - Edit attributes in inspector dev tool does not trigger attributeChangedCallback

Status: NEW

(DevTools :: Inspector, defect, P3)

Description

[andy.782542]

Attachment: firefox-inspector-attribute-change-bug.gif

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/65.0.3325.181 Safari/537.36

Steps to reproduce:

I created a Custom Element V1, polyfilled it by official polyfill from https://www.webcomponents.org/polyfills.

Then I set the oberservedAttributes static array. The attributeChangedCallback only triggers if I use real JS code like setAttribute('foo', 'bar').

Then I went to https://axa-ch.github.io/patterns-library/
But if I change the <axa-icon icon="logo-AXA"> icon-attribute within the inspector dev-tool to facebook, nothing happens.


Actual results:

Nothing.


Expected results:

attributeChangedCallback should have been triggered, since I changed the attribute's value through inspector devtool and as a result the new icon should be displayed.

Comment 1

[Henri Sivonen (:hsivonen)]

I expect this to be by design, but sending over to dev tools to be sure.

Comment 2

[Patrick Brosset <:pbro>]

DevTools does exactly the same thing as you did with JS code. See https://searchfox.org/mozilla-central/rev/39b790b29543a4718d876d8ca3fd179d82fc24f7/devtools/server/actors/inspector/node.js#636-653
In particular this line:
rawNode.setAttribute(change.attributeName, change.newValue);

So, the fact that DevTools runs in a privileged way must be making the difference here.
I just checked and Google Chrome does call the callback when the attribute is changed from the inspector.

Comment 3

[marchbox]

The behavior I see now is: works well with setAttribute(), but if changing an attribute value in inspector, it'll change the attribute value from old value to null first, then null to new value. The code I used to test is as following:

customElements.define('my-el', class extends HTMLElement {
  static get observedAttributes() {
    return ['foo'];
  }

  constructor() {
    super();
  }

  attributeChangedCallback(name, oldVal, newVal) {
    console.log({name, oldVal, newVal});
  }
});

<my-el foo="bar"></my-el>

When editing foo's value to baz, you can see 2 log entries printed out:

{name: "foo", oldVal: "bar", newVal: null}
{name: "foo", oldVal: null, newVal: "baz"}