Audio custom element constructor is called after its decedents
Categories
(Core :: DOM: Core & HTML, defect)
Tracking
()
People
(Reporter: alexander, Unassigned)
Details
User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/81.0.4044.122 Safari/537.36
Steps to reproduce:
(1) Create custom element extending HTMLAudioElement and some other custom elements
(2) Add your custom audio element to HTML and add custom elements children to it
(3) Constructors are called in wrong order
Actual results:
First nested constructors are called in the right order and only then audio constructor is called. Even connectedCallback of children is called before audio constructor which is crazy. How can it be attached to DOM if parent element is not yet constructed?
Expected results:
Constructors are called as the DOM tree progresses inward. Here's reproduction URL:
https://codepen.io/waterplea/pen/VwvWLvG
Chrome behaves the same way. I kinda understand why it's happening since audio treats its content in a special way to show it when it's not supported, but it breaks logic and is probably not necessary anymore since audio is literally supported everywhere. At least connectedCallback should be called after audio is constructed, otherwise we can only rely on setTimeout to know that a parent is finished constructing.
Oh no, looks like it's unrelated to audio tag. Constructors and connectedCallbacks are called in the order they were defined customElements.define. How on earth are we supposed to rely on that?
|
||
Comment 2•5 years ago
|
||
Bugbug thinks this bug should belong to this component, but please revert this change in case of error.
|
||
Comment 3•5 years ago
|
||
Thanks for reporting this issue.
It is expected behavior which is defined in the spec, the Constructors and connectedCallbacks are called during the upgrade steps which happens while calling customElements.define. Spec only ensure elements with same definitation are upgraded in tree order, see step 18 of https://html.spec.whatwg.org/multipage/custom-elements.html#dom-customelementregistry-define.
Description
•