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

[julczka]

Reproducible in vscode.dev or in VS Code Desktop?

• [X] 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

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

[mak1A4]

I found and fixed the issue. Check out the pull-request for more details: https://github.com/microsoft/vscode/pull/195608.