Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

New Scoped <style> Added to DOM #7

Open
CamdenShaw opened this issue Jan 27, 2021 · 1 comment
Open

New Scoped <style> Added to DOM #7

CamdenShaw opened this issue Jan 27, 2021 · 1 comment

Comments

@CamdenShaw
Copy link

CamdenShaw commented Jan 27, 2021

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:
Screenshot 2021-01-27 115947

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
Copy link
Owner

samthor commented Sep 4, 2021

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants