registerElement createdCallback "this" value is a TypeError string
Reported by
matt...@bitovi.com,
Jun 3 2016
|
||||||||||
Issue description
UserAgent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/50.0.2661.102 Safari/537.36
Example URL:
Steps to reproduce the problem:
Create an html page with this content:
<demo-app></demo-app>
<script>
document.registerElement("demo-app", {
prototype: {
createdCallback: function(){
console.log(this);
}
}
});
</script>
What is the expected behavior?
Log an element.
What went wrong?
It logs this string instead:
TypeError: Cannot read property 'toLowerCase' of undefined
at Object.InjectedScript._describe (<anonymous>:175:71)
at InjectedScript.RemoteObject (<anonymous>:194:58)
at Object.InjectedScript._wrapObject (<anonymous>:60:13)
at Object.InjectedScript.wrapObject (<anonymous>:49:13)
at demo-app.document.registerElement.createdCallback (two.html:6)
at two.html:3
Does it occur on multiple sites: N/A
Is it a problem with a plugin? N/A
Did this work before? N/A
Does this work in other browsers? N/A
Chrome version: 50.0.2661.102 Channel: n/a
OS Version: OS X 10.11.3
Flash Version: Shockwave Flash 21.0 r0
,
Jun 3 2016
@matthew: Could you please let us know, if we can go ahead and close this issue based on your comment #1. Thank you.
,
Jun 3 2016
@rnimmagadda: I'm pretty sure this is a bug. I don't know what the spec says, but I doubt the value of `this` should be a string.
,
Jun 3 2016
Thank you for providing more feedback. Adding requester "rnimmagadda@chromium.org" for another review and adding "Needs-Review" label for tracking. For more details visit https://www.chromium.org/issue-tracking/autotriage - Your friendly Sheriffbot
,
Jun 3 2016
Please check to see if there is similar behavior on Safari and Firefox. If not, please attach an HTML file that demonstrates the problem.
,
Jun 6 2016
@matthew: Could you please respond to comment #5 Thank you.
,
Jun 6 2016
Safari doesn't support registerElement so I can't test there. Tested in Firefox, it doesn't happen there, logs the element.
,
Jun 6 2016
Thank you for providing more feedback. Adding requester "shrike@chromium.org" for another review and adding "Needs-Review" label for tracking. For more details visit https://www.chromium.org/issue-tracking/autotriage - Your friendly Sheriffbot
,
Jun 6 2016
,
Jun 7 2016
Comment 1 is probably right; console.log is trying to format 'this', but you've set an odd prototype (the {createdCallback: ...} object.)
We could make the inspector try to work out there's a custom element underneath here and dig it out. I guess that is what Firefox is doing.
,
Jun 7 2016
I don't think this is a bug with the inspector. The value of 'this' is not the element. If you change the example and get rid of the console.log:
<demo-app></demo-app>
<script>
document.registerElement("demo-app", {
prototype: {
createdCallback: function(){
this.appendChild(document.createElement("div"));
}
}
});
</script>
It throws "Uncaught TypeError: this.appendChild is not a function". Because 'this' is a string.
,
Jun 7 2016
It looks like both Firefox and Chrome are getting the actual element as 'this', but in Chrome's case, the inspector can't format it correctly. Matthew's code in #12 also prints an error in Firefox. Inspector knows that 'this''s subtype == 'node', but incorrectly formats it like an error string because of the error thrown when it has no nodeName after the custom prototype is set. For now, we can emulate Firefox's behavior by modifying our inspector's formatter to use the constructor.name when the nodeName is not present.
,
Jun 8 2016
Re: comment 12, this.appendChild is basically the same problem. appendChild comes from the Element prototype. But something like Element.prototype.appendChild.call(this, document.createElement('div')) should work.
,
Jun 10 2016
The following revision refers to this bug: https://chromium.googlesource.com/chromium/src.git/+/dd2fb8355246a4c73576c4784797bf9e9f249de9 commit dd2fb8355246a4c73576c4784797bf9e9f249de9 Author: luoe <luoe@chromium.org> Date: Fri Jun 10 01:50:43 2016 DevTools: properly format custom elements without nodenames Elements created via document.registerElement without using the HTMLElement prototype will be formatted as nodes in the console. BUG= 616981 Review-Url: https://codereview.chromium.org/2056433002 Cr-Commit-Position: refs/heads/master@{#399066} [add] https://crrev.com/dd2fb8355246a4c73576c4784797bf9e9f249de9/third_party/WebKit/LayoutTests/inspector/console/console-log-custom-elements-expected.txt [add] https://crrev.com/dd2fb8355246a4c73576c4784797bf9e9f249de9/third_party/WebKit/LayoutTests/inspector/console/console-log-custom-elements.html [modify] https://crrev.com/dd2fb8355246a4c73576c4784797bf9e9f249de9/third_party/WebKit/Source/platform/v8_inspector/InjectedScriptSource.js
,
Jun 15 2016
The following revision refers to this bug: https://chromium.googlesource.com/chromium/src.git/+/dd2fb8355246a4c73576c4784797bf9e9f249de9 commit dd2fb8355246a4c73576c4784797bf9e9f249de9 Author: luoe <luoe@chromium.org> Date: Fri Jun 10 01:50:43 2016 DevTools: properly format custom elements without nodenames Elements created via document.registerElement without using the HTMLElement prototype will be formatted as nodes in the console. BUG= 616981 Review-Url: https://codereview.chromium.org/2056433002 Cr-Commit-Position: refs/heads/master@{#399066} [add] https://crrev.com/dd2fb8355246a4c73576c4784797bf9e9f249de9/third_party/WebKit/LayoutTests/inspector/console/console-log-custom-elements-expected.txt [add] https://crrev.com/dd2fb8355246a4c73576c4784797bf9e9f249de9/third_party/WebKit/LayoutTests/inspector/console/console-log-custom-elements.html [modify] https://crrev.com/dd2fb8355246a4c73576c4784797bf9e9f249de9/third_party/WebKit/Source/platform/v8_inspector/InjectedScriptSource.js
,
Jun 15 2016
|
||||||||||
►
Sign in to add a comment |
||||||||||
Comment 1 by matt...@bitovi.com
, Jun 3 2016