microsoft / microsoft/monaco-editor
[Bug] Color picker not usable in monaco editor in shadow dom
Open
@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?
- Not reproducible in the monaco editor playground
Monaco Editor Playground Link
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
- Open web component example
- change language to
css - add any selector and a css declaration that has some color as a value
- try to open color picker, it dissapears as soon as you move the mouse.
Actual (Problematic) Behavior
Problematic behavior is visible on this video:
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
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Assessment
This issue has not been assessed yet.