# SyntaxHighlight throw error on shadow DOM

**URL:** <https://discuss.codemirror.net/t/syntaxhighlight-throw-error-on-shadow-dom/9365>\
**Category:** Uncategorized\
**Created:** [August 1, 2025, 6:23am UTC](https://discuss.codemirror.net/t/syntaxhighlight-throw-error-on-shadow-dom/9365 "2025-08-01T06:23:40Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![stevesum](https://discuss.codemirror.net/user_avatar/discuss.codemirror.net/stevesum/32/5203_2.png) [@stevesum](https://discuss.codemirror.net/u/stevesum)\
**Post date:** [August 1, 2025, 6:23am UTC](https://discuss.codemirror.net/t/syntaxhighlight-throw-error-on-shadow-dom/9365/1 "2025-08-01T06:23:40Z")

</div>

I try to use the CodeMirror with custom language in a Vaadin Dialog, but I ran into errors.

```auto
import {EditorView, lineNumbers} from "@codemirror/view";
import {EditorState} from "@codemirror/state";
import {HighlightStyle, StreamLanguage, syntaxHighlighting} from "@codemirror/language";
import {tags} from "@lezer/highlight"

...

  const dialog = document.createElement('vaadin-dialog', {});
  document.body.appendChild(dialog);

  dialog.renderer = (root, dialog) => {
    const editorContainer = document.createElement('div');
    root.appendChild(editorContainer);

    const customLanguage = StreamLanguage.define({...});
    const myHighlightStyle = HighlightStyle.define([{ tag: tags.keyword, color: "#E06C75" }, ...]);

    const editorState = EditorState.create({
      doc: "The custom language content",
      extensions: [
        lineNumbers(),
        customLanguage,
        syntaxHighlighting(myHighlightStyle)
     ],
  });

  const editorView = new EditorView({
    state: editorState,
    parent: editorContainer,
    // give the shadow root context
    root: root.getRootNode()
  });

```

If I add the syntax highlighting to the extensions, then I get the following error:

```auto
CodeMirror plugin crashed: TypeError: e is not iterable
    at zy.style (index.js:261:29)
    at index.js:278:33
    at iy.highlightRange (index.js:365:22)
    at ty (index.js:306:13)
    at Wy.buildDeco (index.js:1784:13)
    at new Wy (index.js:1762:33)
    at wf.create (index.js:2502:49)
    at xf.update (index.js:2522:51)
    at new vg (index.js:7557:20)
    at t.renderer [as _oldRenderer]

```

Any idea?

I use the following versions:

```auto
"@codemirror/language": "^6.11.2",
    "@codemirror/state": "^6.5.2",
    "@codemirror/view": "^6.38.1",
    "@lezer/highlight": "^1.2.1",
    "@vaadin/vaadin-core": "^16.0.1",

```

---

<div class="post-metadata">

**Author:** ![marijn](https://discuss.codemirror.net/user_avatar/discuss.codemirror.net/marijn/32/136_2.png) [@marijn](https://discuss.codemirror.net/u/marijn)\
**Post date:** [August 1, 2025, 4:40pm UTC](https://discuss.codemirror.net/t/syntaxhighlight-throw-error-on-shadow-dom/9365/2 "2025-08-01T16:40:19Z")

</div>

Can you reproduce this without `@vaadin/vaadin-core`? If so, could you set up a minimal, self-contained script that produces the error, and tell me which browser(s) you’re seeing it in?

---

<div class="post-metadata">

**Author:** ![stevesum](https://discuss.codemirror.net/user_avatar/discuss.codemirror.net/stevesum/32/5203_2.png) [@stevesum](https://discuss.codemirror.net/u/stevesum)\
**Post date:** [August 3, 2025, 6:28am UTC](https://discuss.codemirror.net/t/syntaxhighlight-throw-error-on-shadow-dom/9365/3 "2025-08-03T06:28:05Z")

</div>

Yes. Can easily reproduce it without Vaadin. Just put the editor into the Shadow DOM.

Here is a short example. I tested it with Chrome.

```auto
<!DOCTYPE html>
<html>
<head>
<title>CodeMirror 6 Custom Syntax Highlighting</title>
<style>
  body { font-family: sans-serif; margin: 20px; }
  .cm-editor {
    border: 1px solid #ccc;
    height: auto;
  }
  .cm-keyword { color: #007bff; font-weight: bold; } /* Kék a PROGRAM-hoz */
  .cm-keyword-jelszo { color: #dc3545; font-weight: bold; } /* Piros a JELSZÓ-hoz */
</style>
</head>
<body>

<h1>CodeMirror 6 Custom Syntax Highlighting with shadow DOM</h1>

<script type="module">
  import { EditorView } from 'https://esm.sh/@codemirror/view';
  import { EditorState } from 'https://esm.sh/@codemirror/state';
  import { HighlightStyle, StreamLanguage, syntaxHighlighting } from 'https://esm.sh/@codemirror/language';
  import {tags} from "https://esm.sh/@lezer/highlight"
  
	const root = document.createElement("div");
	document.body.append(root);
	const editor = document.createElement("div");
	
	//TODO use this to use without shadow DOM
	//root.append(editor);
	
	//TODO comment this two line out to not use the shadow DOM
	const shadow = root.attachShadow({ mode: "open" });
	shadow.append(editor);

  const myLanguage = StreamLanguage.define({
	name: "Signalterv",
	startState: () => ({}),
	token: (stream) => {
	
		const commands = ["JELSZO", "VEGE", "PROGRAM"];

		for (let cmd of commands) {
			if (stream.match(new RegExp(`^${cmd} `, ''))) {
				return "keyword";
			}
		}		

		if (stream.match(/^[a-zA-Z0-9,\-_|#]+/)) { 
			return "string"; 
		}

		stream.next();
        return null;
	}
  });

  const doc = `PROGRAM MyAwesomeProgram
  This is some code.
  JELSZO SecretPassword123
  Another code line.
VEGE `;

	const myHighlightStyle = HighlightStyle.define([
		{ tag: tags.keyword, class: 'cm-keyword' },
	]);

  new EditorView({
    state: EditorState.create({
      doc: doc,
      extensions: [
        myLanguage, 
		syntaxHighlighting(myHighlightStyle, {fallback: true})
      ]
    }),
    parent: editor,
    // TODO comment it out to not use the shadow DOM
	root: shadow
  });
</script>

</body>
</html>

```

---

<div class="post-metadata">

**Author:** ![marijn](https://discuss.codemirror.net/user_avatar/discuss.codemirror.net/marijn/32/136_2.png) [@marijn](https://discuss.codemirror.net/u/marijn)\
**Post date:** [August 3, 2025, 8:23am UTC](https://discuss.codemirror.net/t/syntaxhighlight-throw-error-on-shadow-dom/9365/4 "2025-08-03T08:23:33Z")

</div>

I get no errors thrown when I run this (see for example [here](https://codemirror.net/try/#c=aW1wb3J0IHsgRWRpdG9yVmlldyB9IGZyb20gIkBjb2RlbWlycm9yL3ZpZXciCmltcG9ydCB7IEVkaXRvclN0YXRlIH0gZnJvbSAiQGNvZGVtaXJyb3Ivc3RhdGUiCmltcG9ydCB7IEhpZ2hsaWdodFN0eWxlLCBTdHJlYW1MYW5ndWFnZSwgc3ludGF4SGlnaGxpZ2h0aW5nIH0gZnJvbSAiQGNvZGVtaXJyb3IvbGFuZ3VhZ2UiCmltcG9ydCB7dGFnc30gZnJvbSAiQGxlemVyL2hpZ2hsaWdodCIKCmNvbnN0IHJvb3QgPSBkb2N1bWVudC5jcmVhdGVFbGVtZW50KCJkaXYiKTsKZG9jdW1lbnQuYm9keS5hcHBlbmQocm9vdCk7CmNvbnN0IGVkaXRvciA9IGRvY3VtZW50LmNyZWF0ZUVsZW1lbnQoImRpdiIpOwoKLy9UT0RPIHVzZSB0aGlzIHRvIHVzZSB3aXRob3V0IHNoYWRvdyBET00KLy9yb290LmFwcGVuZChlZGl0b3IpOwoKLy9UT0RPIGNvbW1lbnQgdGhpcyB0d28gbGluZSBvdXQgdG8gbm90IHVzZSB0aGUgc2hhZG93IERPTQpjb25zdCBzaGFkb3cgPSByb290LmF0dGFjaFNoYWRvdyh7IG1vZGU6ICJvcGVuIiB9KTsKc2hhZG93LmFwcGVuZChlZGl0b3IpOwoKY29uc3QgbXlMYW5ndWFnZSA9IFN0cmVhbUxhbmd1YWdlLmRlZmluZSh7CiAgbmFtZTogIlNpZ25hbHRlcnYiLAogIHN0YXJ0U3RhdGU6ICgpID0+ICh7fSksCiAgdG9rZW46IChzdHJlYW0pID0+IHsKICAgIGNvbnN0IGNvbW1hbmRzID0gWyJKRUxTWk8iLCAiVkVHRSIsICJQUk9HUkFNIl07CgogICAgZm9yIChsZXQgY21kIG9mIGNvbW1hbmRzKSB7CiAgICAgIGlmIChzdHJlYW0ubWF0Y2gobmV3IFJlZ0V4cChgXiR7Y21kfSBgLCAnJykpKSB7CglyZXR1cm4gImtleXdvcmQiOwogICAgICB9CiAgICB9CQkKCiAgICBpZiAoc3RyZWFtLm1hdGNoKC9eW2EtekEtWjAtOSxcLV98I10rLykpIHsgCiAgICAgIHJldHVybiAic3RyaW5nIjsgCiAgICB9CgogICAgc3RyZWFtLm5leHQoKTsKICAgIHJldHVybiBudWxsOwogIH0KfSk7Cgpjb25zdCBkb2MgPSBgUFJPR1JBTSBNeUF3ZXNvbWVQcm9ncmFtClRoaXMgaXMgc29tZSBjb2RlLgpKRUxTWk8gU2VjcmV0UGFzc3dvcmQxMjMKQW5vdGhlciBjb2RlIGxpbmUuClZFR0UgYDsKCgoKY29uc3QgbXlIaWdobGlnaHRTdHlsZSA9IEhpZ2hsaWdodFN0eWxlLmRlZmluZShbCiAgeyB0YWc6IHRhZ3Mua2V5d29yZCwgY2xhc3M6ICdjbS1rZXl3b3JkJyB9LApdKTsKCm5ldyBFZGl0b3JWaWV3KHsKICBzdGF0ZTogRWRpdG9yU3RhdGUuY3JlYXRlKHsKICAgIGRvYzogZG9jLAogICAgZXh0ZW5zaW9uczogWwogICAgICBteUxhbmd1YWdlLCAKICAgICAgc3ludGF4SGlnaGxpZ2h0aW5nKG15SGlnaGxpZ2h0U3R5bGUsIHtmYWxsYmFjazogdHJ1ZX0pCiAgICBdCiAgfSksCiAgcGFyZW50OiBlZGl0b3IsCiAgLy8gVE9ETyBjb21tZW50IGl0IG91dCB0byBub3QgdXNlIHRoZSBzaGFkb3cgRE9NCiAgcm9vdDogc2hhZG93Cn0pOwo=)) in Chrome.

---

<div class="post-metadata">

**Author:** ![stevesum](https://discuss.codemirror.net/user_avatar/discuss.codemirror.net/stevesum/32/5203_2.png) [@stevesum](https://discuss.codemirror.net/u/stevesum)\
**Post date:** [August 3, 2025, 8:49am UTC](https://discuss.codemirror.net/t/syntaxhighlight-throw-error-on-shadow-dom/9365/5 "2025-08-03T08:49:02Z")

</div>

Yes you are right. I did not noticed that no error thrown with this example, but as you can see, no highlighting either in the editor.

So probably the exception is cached somewhere.

If you follow the TODO comments, you will see, that without the ShadowDOM the code will be highlighted, but if pasted into the shadowDOM, the syntaxHighlighting() doesn’t work.

---

<div class="post-metadata">

**Author:** ![marijn](https://discuss.codemirror.net/user_avatar/discuss.codemirror.net/marijn/32/136_2.png) [@marijn](https://discuss.codemirror.net/u/marijn)\
**Post date:** [August 3, 2025, 10:29am UTC](https://discuss.codemirror.net/t/syntaxhighlight-throw-error-on-shadow-dom/9365/6 "2025-08-03T10:29:57Z")

</div>

> [@stevesum](#):
>
> but as you can see, no highlighting either in the editor.

The class names are there in the editor content. The reason they don’t have a color is that you defined their styles in the outer document, and they won’t take effect inside the shadow DOM.

---

<div class="post-metadata">

**Author:** ![stevesum](https://discuss.codemirror.net/user_avatar/discuss.codemirror.net/stevesum/32/5203_2.png) [@stevesum](https://discuss.codemirror.net/u/stevesum)\
**Post date:** [August 3, 2025, 6:11pm UTC](https://discuss.codemirror.net/t/syntaxhighlight-throw-error-on-shadow-dom/9365/7 "2025-08-03T18:11:47Z")

</div>

ok. I will check it tomorrow at work and then try to give you an small vaadin example with the exception then.

---

<div class="post-metadata">

**Author:** ![stevesum](https://discuss.codemirror.net/user_avatar/discuss.codemirror.net/stevesum/32/5203_2.png) [@stevesum](https://discuss.codemirror.net/u/stevesum)\
**Post date:** [August 4, 2025, 9:20am UTC](https://discuss.codemirror.net/t/syntaxhighlight-throw-error-on-shadow-dom/9365/8 "2025-08-04T09:20:16Z")

</div>

Well, seems that was a code bug on my side. I replaced the old stream/highlight code with the one from the example, and it worked in the Vaadin dialog as well.

So I am very thankful for your help!