Missing styles when using codemirror.next editor in a custom element

1

Hi there!

I have forked codemirror.next repository and packaged the current master (commit 434b5e8) for use in a TypeScript project. My purpose is to use codemirror.next in a Web app that makes use of web components (i.e. custom elements). In this context, codemirror.next editor is simply appended to the DOM of a custom element.

Following the demo code, I created a working example. The codemirror editor is loading without any error. However, it lacks CSS styles:

Screenshot from 2020-03-26 19-41-21
Screenshot from 2020-03-26 19-41-21858×389 14.2 KB

The only CSS definitions I found are the following but they are not enough to get the same styles as the one displayed on the codemirror.next landing page (https://codemirror.net/6/):

.cm-wrap { max-height: 200px; border: 1px solid silver; font-size: 14px }
.cm-scroller { overflow: auto; }

My question might look quite stupid but I cannot default CSS definitions to load from a file. Is there such a file available somewhere? are default styles for the editor set by JS code? in this last case, there might be an issue with codemirror.next and shadow dom support.

2

The styles are created by the scripts. It tries to properly detect the shadow root to attach them to, but that hasn’t ever been tested, so it’s not unlikely that it’s broken. Could you file an issue with an example that reproduces the problem on the website?

3

Here is the issue with an example to reproduce the problem: