microsoft / microsoft/monaco-editor

[Bug] Color picker not usable in monaco editor in shadow dom

Open
#3,845 1 comment 2 reactions 1 assignee View on GitHub

@aiday-mar is already working on this.

Since Dec 8, 2025.

bug editor-shadow-dom
Dominant language
JavaScript
Stars
46.8k
Forks
4.1k
Avg merge
17h 58m
Merged PRs (30d)
1

Description

Reproducible in vscode.dev or in VS Code Desktop?
  • Not reproducible in vscode.dev or VS Code Desktop
Reproducible in the monaco editor playground?
Monaco Editor Playground Link

https://microsoft.github.io/monaco-editor/playground.html?source=v0.36.1#XQAAAAIDBAAAAAAAAABBqQkHQ5NjdYzqEXhNewrSKZslyM_G2I4bTkHQYW1lB1MplPA6z0speGDFvgRIQQx0HI9zdEFZdk3ipJqwzu6RT44vPXZPcpCKxnvgE9TYAtuAi9VQr3EAhbQJCn4JPD8EaFYCtRcYWa8_pnHjN-uDjxrhmN3g8tmx0iWUz1zF7VMROnGNjfHj2TFmcBooqFj0KG-T22ZTMWTmebWAKwtN_PzaTmIn83sxr9iG_rCToVGZ0s8Aqq4FCtsWBjMFVvarCcsgdWatYDG40I2zD8RTtWuNHNnY7c7IoNZIQlbLuUY6eiWdTFPiXUP1O8oaah0Csz8RlRcIa1l9lhCgWLmDqqOL08Y3F0K8dVIo69eyZtcffV2oBXpdc3VTcdsCp1Y898LUMwBEQMRkIvbz7CBuaqOSacXtrQdqhAqjekP8a0fHRClj00Ayniiid1DDyNpyEfu6SGdPfBH6LkLC5i7FXsHHUvO1GnCc1irro7YZl39IXXoeMqNUFgbEUptiN43oiqtTzYUtpRD_hLxuaVJ3UBWtHaMFjPD1kiQWekYju4V_l4LrUn6-kyOw7QUwiPlt7ljIjAAdnoanwDrlkEMdEUK0bYRb7stBpL36u_IfrqKwRX66TqjGZFKZjd4wpg9wQ_V08GvGVO_sZ-vV8jiQVjqz6p76A1HXqKVruW_iDZcR4kOjwCdUNJP3mttdVsEyH09aUeseNlswxCqs0mnU9Vy33S20ZNSOIKmE6e1f6xfzsxCD_p2l4Q

Monaco Editor Playground Code
customElements.define(
	"code-view-monaco",
	class CodeViewMonaco extends HTMLElement {
		_monacoEditor;
		/** @type HTMLElement */
		_editor;

		constructor() {
			super();

			const shadowRoot = this.attachShadow({ mode: "open" });

			// Copy over editor styles
			const style = document.querySelector(
				"link[rel='stylesheet'][data-name='vs/editor/editor.main']"
			);
			shadowRoot.appendChild(style.cloneNode(true));

			const template = /** @type HTMLTemplateElement */ (
				document.getElementById("editor-template")
			);
			shadowRoot.appendChild(template.content.cloneNode(true));

			this._editor = shadowRoot.querySelector("#container");
			this._monacoEditor = monaco.editor.create(this._editor, {
				automaticLayout: true,
				language: "css",
				value: `div {
    color: red;
}`,
			});
		}
	}
);
Reproduction Steps
  1. Open web component example
  2. change language to css
  3. add any selector and a css declaration that has some color as a value
  4. try to open color picker, it dissapears as soon as you move the mouse.
Actual (Problematic) Behavior

Problematic behavior is visible on this video:

https://user-images.githubusercontent.com/56249914/225898929-ea5cfd4f-686d-412b-882e-f0ad7f188515.mp4

Expected Behavior

It is possible to pick the color with color picker when monaco is used inside a web component.

Additional Context

No response

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.