Monaco-editor: Use in custom elements (web components)

[claytongulick]

With the way the css is being included, the editor can't be used in the shadow dom for a custom element. It would be great to be able to wrap this fantastic editor as a web component that could be easily reused in projects. That'll probably end up needing more architecture thought than just scoping the css though.

[eterna2]

I like that also. But it is tough. For the css, it is easy to just insert the style into the shadowroot.

But there is a lot of parts of the code that check against document.body or insert into the body. I managed to patch that part, but there are still many parts not working.

I am still looking thru the codes. The caret api to select text also dun exist in the shadowRoot.

I am not optimistic.

[alexdima]

AFAIK the blocker is that document.caretRangeFromPoint is not 100% working with shadow dom.

[claytongulick]

I've got it sort of hackishly wrapped, I put the editor container in the light dom, create the editor on connectedCallback and the whole thing goes into a slot in shadow. Working pretty well, but dependent on light dom and global monaco since I can't import it. This approach lets me wrap the api and use it as a component though, so good enough for now.

[eterna2]

Actually I made a polymer component already.
https://github.com/PolymerVis/monaco-editor

Your approach only works if the components is used in the light Dom, but not when the component itself is used within another component.

So what I did is, if root is document.body, I do the same as what u did. Else I create an iframe inside the shadowRoot, then I proxy some of the common functions between the component and the iframe.

[simonh1000]

Per https://github.com/microsoft/monaco-editor/issues/1676 we also need to take into account the extra div being created outside of the webcomponent. I was looking at a monaco webcomponent so that I could use Monaco in an Elm program but this extra div seems to be affecting Elm's virtual dom handling

[codeStryke]

I'm currently working on wrapping monaco-editor in a web component for an internal product at work. I used https://github.com/microsoft/monaco-editor-samples/blob/master/browser-amd-shadow-dom/index.html and https://github.com/microsoft/monaco-editor/blob/master/test/shadow-dom.html for inspiration.

I notice a <div class="monaco-aria-container"> on the document and I suspect it's being created by https://github.com/microsoft/vscode/blob/master/src/vs/base/browser/ui/aria/aria.ts. I'm wondering what is the intended use of this and what is it's impact if it leaks out of the shadowRoot? Any information / explanation is greatly appreciated and thank you for your time.