The main concern with microtask checkpoint timing of the distribution API callbacks is explained on the main Imperative API page. The following experiment aims to provide data on the amount and type of breakages the asynchronous timing would cause in the wild.
I took the nope-js project as a starting point. This project has the goal of providing strong hints to developers on the choice of their APIs and their timing. For example, in unmodified version, calling document.write throws an exception.
As one of the hints, the library introduces a DOM read and DOM write lifecycle stages to the document. The idea is that the developer should explicitly state whether they intend to read the state of the DOM (and its effects, such as computed style information and layout data), write to it, but never both at the same time. In the write mode (default), all of the methods and accessors that cause synchronous layout or style computation throw an exception.
To facilitate exploration, there's an extension (Chrome only at this point) that enables the user to surf the Web with all hints turned on.
For this experiment, I took the extension and modified it. In particular, instead of throwing exceptions, the modified version attempts to approximate the effects of synchronously computing style and layout before the distribution callback was invoked.
The scenario of concern is that the child of a shadow host haven't yet been distributed into any insertion points at the time of invoking the API that triggers synchronous layout/style computation. In this case, the resulting effects roughly break down into 3 categories:
To simulate these effects, the extension simply "lies" whenever asked about layout/style data. This is not a 100% accurate approximation, but it provides enough sense on the type of things that would break if a third-party Web Component is added to an existing site.
To install the modified extension:
- Clone nope-js git repo locally
- Switch the local repo to the
liebranch - Open Chrome (M43+ is required) with a clean profile
- Go to
http://chrome/extensionsand check Developer mode - Click Load unpacked extension... and point the file picker to
extension/chromedirectory in thenope-jsrepo.
After installing the extension, I poked around the Web and looked for changes in appearance and behavior. The console output also provided an overview and extent of "lying".
Here are some things found in the first few minutes:
- BBC News layout is broken (compare with the original) and menu no longer functions (simply jumps to the bottom of the page)
- Graphics on BBC News are very low resution.
- The majority of links is missing from CNN and replaced with an ad in the center of the page.
- MSNBC article layout is broken (compare with the original).
- The images on The Verge article page are missing and the gaps they create are much larger than necessary.
- The background images on The Verge are missing.
- Wikipedia works, but has subtle regressions, like incorrect positioning of the autocompletion menu.
- Youtube has various minor visual regressions (like the missing video thumbnails).
Even within minutes of surfing, it is easy to conclude that the effect of incorrect layout/style data causes the majority of popular Web pages to look varying degrees of wrong and do slightly wrong things.
While it is unlikely that using asynchronous timing for distribution API callbacks will result in changes this dramatic, it is probable that the asynchronous timing will cause good percentage of breakages, making adoption of third-party Web Components a high-risk proposition.