[w3c/webcomponents] Custom Element definition order issues. (#668)

What are the recommended ways of dealing with load order issues? For example, take these two fiddles:

- https://jsfiddle.net/trusktr/e9979p11/
- https://jsfiddle.net/trusktr/e9979p11/4/

One works (outputs `true`) and one doesn't (outputs `false`) for reasons that might not be very obvious to people learning how to use web technology. New programmers shouldn't have to deal with these sorts of problems if they can be avoided by the internal implementation.

A simple deferral of the constructing of Custom Elements to a future microtask would likely solve the problem without requiring Custom Element authors to write defensive deferral code themselves.

Note, Custom Element authors can not determine in which order users will load their scripts, and if elements will be in DOM or not before those scripts are loaded, and this causes unnecessary, increasingly complex, defensive code to be written.

For example, here's the same example, in the other two possible permutations:

- https://jsfiddle.net/trusktr/e9979p11/5/
- https://jsfiddle.net/trusktr/e9979p11/6/

And in those last two permutations, the ordering doesn't help at all! It's `false` both ways!

Here's a defensive code example that always works, in all four permutations:

- https://jsfiddle.net/trusktr/e9979p11/7/
- https://jsfiddle.net/trusktr/e9979p11/8/
- https://jsfiddle.net/trusktr/e9979p11/9/
- https://jsfiddle.net/trusktr/e9979p11/10/

And, unfortunately, it only work in two of the four permutation when using microtasks! See:

- https://jsfiddle.net/trusktr/e9979p11/11/ `true`
- https://jsfiddle.net/trusktr/e9979p11/12/ `true`
- https://jsfiddle.net/trusktr/e9979p11/13/ `false`
- https://jsfiddle.net/trusktr/e9979p11/14/ `false`

The best solution in userland probably involves `customElements.whenDefined`, but it's still defensive coding.

---

The HTML engine could, at least, guarantee that if these elements are defined within the same macrotask synchronously, then the result will be `true` in all permutations. This would make things easier for people, especially new people who are writing code and letting other mechanism place their codes into a page in arbitrary order that they aren't in control of.

Would it be possible to fix this on the browser engine side by not upgrading elements until a microtask-like similar to how MutationObserver runs on a microtask-like?

-- 
You are receiving this because you are subscribed to this thread.
Reply to this email directly or view it on GitHub:
https://github.com/w3c/webcomponents/issues/668