Firefox shadow dom "root.adoptedStyleSheets.indexOf is not a function"

v6
1

Hi,

I’m trying to create a Codemirror instance with a parent element inside the Shadow Dom. This works perfectly on Chrome but for some reason, it fails on Firefox with the error-
“TypeError: root.adoptedStyleSheets.indexOf is not a function”.

I’ve tried passing the root property in the EditorView config but gives me the same error.

const editor = new EditorView({
parent: editorContainer.current,
root: props.root,
state
})

I’ve also tried deleting the node_modules folder and package.json and re-installing all the packages but no luck.

Here are all the packages I’m using-

“codemirror”: “^6.0.1”,
“@codemirror/commands”: “^6.3.2”,
“@codemirror/lang-html”: “^6.4.9”,
“@codemirror/language”: “^6.9.3”,
“@codemirror/legacy-modes”: “^6.3.3”,
“@codemirror/state”: “^6.3.2”,
“@codemirror/view”: “^6.22.1”,
“@lezer/highlight”: “^1.2.0”,

Thanks!

2

What kind of object is props.root?

3

ShadowRoot object

4

I see a normal array, with an indexOf method, in the adoptedStyleSheets property of shadow root objects in Firefox. You might want to do some debugging on your side to make sure a proper shadow root is being passed in.

5

Here are the logs-

image
image1274×818 64.1 KB

I can see adoptedStyleSheets as an Array.

6

Right, so then the question is why an array wouldn’t have an indexOf method.

7

I have the same questions.

I did some more checks in the build files and it is giving some weird results-

console.log(Array.isArray(root.adoptedStyleSheets));

Result: true

console.log(root.adoptedStyleSheets instanceof Array));

Result: false

console.log(typeof root.adoptedStyleSheets);

Result: object

is this a Firefox specific issue?

8

The instanceof Array check may be failing because it’s an instance of the Array type from another frame. Do you maybe have code loaded that messes with Array.prototype?

In any case, I can create an editor in a shadow root on Firefox (127) just fine. You’ll have to figure out what’s going wrong in your setup. I don’t think I can say a lot about that.

9

I’m making an extension. I did some more testing and this problem only arises in injected content scripts in Firefox. In normal pages, it works as expected.

is it possible to use Codemirror v6 without stylesheets?

10

No. ​ ​ ​ ​ ​

11

Maybe you could set up your bundler to replace style-mod, and have it put a <style> tag in each instance. It’s pretty short so you could include a patched version in your project without too much extra space.