New Scoped <style> Added to DOM

[CamdenShaw]

trafficstars

New scoped styles tags added to DOM via html fetch is not triggering on first load/hard refresh. For some reason it works on soft reload. Not helpful when clients will see a broken product on first load. Seems to be specific to FireFox, although run into similar issue on Chrome ~1/1000 page loads. Not confirmed the error on Chrome is the same cause - hard to debug when it happens so randomly. Here is an extremely simplified version of my JS:

fetch(url, options)
    .then((res) => {
        if ( response.ok ) {
            return res.text()
        }
    })
    .then((data) => {
        // do a bunch of checks to verify the data is ok / manipulate the data to remove harmful scripts
        // Then load the fetched HTML into the element
        targetElement.innerHTML = data;
    })

Get the following error when CSS fails to scope:

Error seems to start by passing in a "null" value for the 'sheet' on line 488. However, when I set a breakpoint there the value is no longer null and the fetched CSS is scoped correctly. Notes in the JS indicate that a Promise could be necessary around here - likely the cause.

[samthor]

Can you be clear—is this where you're doing @import inside your styles (in that you mention fetch())?