connectedCallback and innerHTML issue when defining a custom element in different parts of the document
Reported by
mikhail....@zsassociates.com,
Jul 5 2017
|
||||
Issue description
UserAgent: Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/59.0.3071.115 Safari/537.36
Steps to reproduce the problem:
connectedCallback doesn't work as expected when we put a <script> tag with definitions between two elements in the code of the page.
<my-element-1> I am custom element </my-element-1>
<script>
class myComponent1 extends HTMLElement {
constructor() {
super();
}
connectedCallback() {
this.innerHTML += '<b>Hello!</b>';
}
}
customElements.define('my-element-1', myComponent1);
</script>
<br>
<my-element-1> I am custom element </my-element-1>
See more details here:
https://github.com/WebReflection/document-register-element/issues/112
What is the expected behavior?
Expect "Hello!" to be at the end of the contents of the elements regardless of where we define our custom element.
What went wrong?
Instead you can see results like.
"I am custom element Hello!
Hello! I am custom element"
JSFiddle example with the issue: https://jsfiddle.net/webrealizer/m9qec0nv/
Did this work before? N/A
Does this work in other browsers? N/A
Chrome version: 59.0.3071.115 Channel: stable
OS Version: 6.1 (Windows 7, Windows Server 2008 R2)
Flash Version:
,
Jan 15 2018
Bulk edit bugs owned by dominicc@
,
Jan 15
This issue has been Available for over a year. If it's no longer important or seems unlikely to be fixed, please consider closing it out. If it is important, please re-triage the issue. Sorry for the inconvenience if the bug really should have been left as Available. For more details visit https://www.chromium.org/issue-tracking/autotriage - Your friendly Sheriffbot
,
Jan 16
This behavior conforms to the specification. For the first my-element-1, it's start tag is parsed as a non-custom element and a child text node is added to it, then it is upgraded later. For the second my-element-1, it's start tag is parsed and a custom element is instantiated, it's connected to the document, connectedCallback() is called, then child text is parsed. Safari has the same behavior. It seems Firefox has a bug.
,
Jan 16
WPT has a test for this behavior; The fourth test case of https://wpt.fyi/results/custom-elements/parser/parser-sets-attributes-and-children.html?label=experimental
,
Jan 18
(5 days ago)
Looking at this case after 2 years, I can agree that it should be an expected behavior . It would also enable progressive enhancement. But it adds some challenges for developers of web components to consider such cases too. |
||||
►
Sign in to add a comment |
||||
Comment 1 by brajkumar@chromium.org
, Jul 6 2017Labels: -Type-Bug hasbisect-per-revision M-61 OS-Linux OS-Mac Type-Bug-Regression
Owner: dominicc@chromium.org
Status: Assigned (was: Unconfirmed)