[Bug] Styling broken for Shadow DOM

[philkunz]

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]

I marked this as question as we don't have the resources to investigate issues in third party source code.
Please provide a minimal example that is reproducible in the monaco editor playground.

[philkunz]

@hediet Please see the updated issue. I created a Playground example that shows the issue. Just replace the Javascript in the HelloWorld example. Thank you!

[hediet]

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

[cameronbraid]

Has anyone discovered a workaround ?

[cameronbraid]

I found a workaround : include the monaco-editor/min/vs/editor/editor.main.css styles in the shadow dom

[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 component anywhere where you want to have a monaco editor.
The API will get more features over the next few days.

[hediet]

Check out this example.

You have to include the CSS in the web component.