[Bug] 0.34.0 Hover is not working anymore if Editor is in shadow dom. Was working in 0.33.0

[ffaubry]

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?

• [X] Not reproducible in the monaco editor playground

Monaco Editor Playground Code

No response

Reproduction Steps

Use repository https://github.com/ffaubry/monaco-3241 to reproduce the issue. See comments in README.md.

Actual (Problematic) Behavior

No response

Expected Behavior

No response

Additional Context

No response

[escoand]

Here is the playground code to reproduce this problem:

JavaScript:

const prefix = '../node_modules/monaco-editor/min/vs';
var config = {
    value: ['function x() {', '\tconsole.log("Hello world!");', '}'].join('\n'),
    language: 'javascript'
};

/* shadow root */
require.config({
    paths: { vs: prefix },
    'vs/css': { disabled: true }
});
var container1 = document.getElementById('container1');
var shadowRoot = container1.attachShadow({ mode: 'closed' });
var innerContainer = document.createElement('div');
shadowRoot.appendChild(innerContainer);
innerContainer.style.width = '100%';
innerContainer.style.height = '100%';
shadowRoot.appendChild(document.createElement('style')).innerText =
    '@import "' + prefix + '/editor/editor.main.css";';
require(['vs/editor/editor.main'], function () {
    monaco.editor.create(innerContainer, config);
});

/* normal */
require.config({ paths: { vs: prefix } });
var container2 = document.getElementById('container2');
require(['vs/editor/editor.main'], function () {
    monaco.editor.create(container2, config);
});

HTML:

Shadow Root
<div id="container1" style="height: 50%; border: 1px solid grey"></div>
Normal
<div id="container2" style="height: 50%; border: 1px solid grey"></div>

[escoand]

I found out that the HoverProvider is not working at all. When you add this it's never called from the ShadowDom Part:

monaco.languages.registerHoverProvider("javascript", {
    provideHover: (m, p, t) => console.log(m, p, t)
});

[escoand]

Found a workaround: instead of adding the editor directly to shadowRoot you could use a <slot> element and add the editor as child of the parent element.

const container2 = document.getElementById('container2');
// shadow root
const shadowRoot2 = container2.attachShadow({ mode: 'closed' });
shadowRoot2.appendChild(document.createElement('style')).innerText =
    '@import "' + prefix + '/editor/editor.main.css";';
// slot
const slot2 = shadowRoot2.appendChild(document.createElement("slot"));
slot2.setAttribute("name", "editor");
// slotted element
const innerContainer2 = document.createElement('div');
innerContainer2.setAttribute("slot", "editor");
innerContainer2.style.width = '100%';
innerContainer2.style.height = '100%';
container2.appendChild(innerContainer2);
// editor
require(['vs/editor/editor.main'], function () {
    monaco.editor.create(innerContainer2, config);
});

[hediet]

Thanks for reporting this issue!

Without a monaco editor playground example we cannot investigate this issue unfortunately. In case this bug still applies, please create a new issue. You can use the web-compoment example as a start.

[ffaubry]

@hediet The reason for closing the issue doesn't match the history of the issue. A playground code WAS provided to illustrate the issue.

I also hope that you understand that this cannot be reproduced in the "official" editor playground since it involves "shadow DOM". It has to be done in an app that wraps Monaco in a web component with shadow DOM.

[hediet]

Let's track it in https://github.com/microsoft/monaco-editor/issues/3409

I also hope that you understand that this cannot be reproduced in the "official" editor playground since it involves "shadow DOM".

Please note that this is not true, see the example in the linked issue.