User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/94.0.4606.81 Safari/537.36

Steps to reproduce:

I've a complex page, where in on specific customElement the adopted stylesheets array is empty. Chrome & Safari it is not, and there is no code to empty it.
It also works in stable FireFox without native adopted stylesheets.

I'm currently not able to create a small reproducable scenario, so here is the page:
1.) goto https://node-projects.github.io/web-component-designer-demo/index.html
2.) drag a "button" from the toolbar in the lower right corner to the canvas
3.) the result should look like in image "should.png"

https://node-projects.github.io/web-component-designer-demo/index.html

Actual results:

adoptedstylesheets property of shadowroot of node-projects-overlay-layer-view is empty

Expected results:

the property should not be empty

this is how it looks like in firefox nightly

video in chrome https://watch.screencastify.com/v/3HzkebTT0VQfrpxMMI3o

https://bugzilla.mozilla.org/show_bug.cgi?id=1520690

I forgott, you need to enable this flag in about:config.

layout.css.constructable-stylesheets.enabled

The Bugbug bot thinks this bug should belong to the 'Core::DOM: CSS Object Model' component, and is moving the bug to that component. Please revert this change in case you think the bot is wrong.

So, I can't repro this, but that's because the site is broken in Firefox, because of a syntax error it seems. Pasting this into the console:

        if (typeof fileOrObject === 'string') {
            this._importPrefix = this._importPrefix ?? fileOrObject.split('/').slice(0, -1).join('/');
            import(fileOrObject, { assert: { type: 'json' } }).then(module => {
                this._packageData = module.default;
                this._parseManifest();
            }).catch(err => {
                if (this._rejectStored) {
                    this._rejectStored.forEach(x => x(err));
                    this._resolveStored = null;
                    this._rejectStored = null;
                }
            });
        }
        else {
            this._packageData = fileOrObject;
            this._parseManifest();
        }

Gives a syntax error which doesn't happen in other browsers, and an obscure one at that.

Reduced:

import(window.foo, { assert: { type: 'json' } })

Yulia, do you know where this JS syntax is tracked?

Ah, I think I found it: javascript.options.experimental.import_assertions

This is the JSON modules proposal and the import assertions proposal.

Import assertions: https://bugzilla.mozilla.org/show_bug.cgi?id=1736059

JSON modules: https://bugzilla.mozilla.org/show_bug.cgi?id=1670176

These are stage 3 proposals... so they are not yet standard. We have a partial implementation so this may be why it is failing.

On safari, this syntax is failing for me, as import still expects only one argument. CC'ing matthew as he was following the import assertion work closely.

Ok, so with that it fails in both WebKit and Firefox in the same way, because they're relying on new CSSStyleSheet().rules which whatever constructable stylesheets polyfill they're using doesn't polyfill correctly. But with the "native" adopted stylesheets I can reproduce.

See https://github.com/WICG/construct-stylesheets/issues/133, which is
where this change was discussed (and then made to Chromium apparently).

I filed https://github.com/w3c/csswg-drafts/issues/7229 to put some
actual spec text here. Also, tweak the wpt which is supposed to test so
that it fails without this change.

https://hg.mozilla.org/mozilla-central/rev/d23de6842cb7