[Bug] Styling broken for Shadow DOM

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 Code

const template = document.createElement('template');
template.innerHTML = `
<style>
    #innercontainer {
        height: 100%;
    }
</style>
<div id="innercontainer">
  
</div>`;

class MonacoWC extends HTMLElement {
    constructor() {
        super();
        this.attachShadow({ mode: 'open' });
        this.shadowRoot.appendChild(template.content.cloneNode(true));
    }

    connectedCallback() {
        const innercontainer = this.shadowRoot.getElementById('innercontainer');
        monaco.editor.create(innercontainer, {
            value: "function hello() {\n\talert('Hello world!');\n}",
            language: 'javascript'
        });
    }

    render() {

    }
}
window.customElements.define('monaco-wc', MonacoWC);
const container = document.getElementById('container');
const wcEditor = document.createElement('monaco-wc');
container.append(wcEditor);

Actual Behavior

editor is loaded, however styling is off. lines change order upon scrolling

Expected Behavior

editor should load normally, woth scrolling not affecting lines order.

Additional Context

[hediet]

Thanks for the example! I can reproduce, it looks completely broken.

[philkunz]

@cameronbraid nice, I confirm that this works. Also I created a simple to use lit based web component, that works out of the box: https://gitlab.com/designestate/dees-editor

Simply put the <dees-editor></dees-editor> component anywhere where you want to have a monaco editor. The API will get more features over the next few days.