Shadow DOM support



Do you have any plans to support creating ProseMirror instances in a shadow DOM root so it can be used in web components that use shadow DOM? I had a stab at modifying the source to see if I could get it partially working myself to try to come up with a proof of concept but failed at the point of working out how to fix event targeting. My Javascript-foo isn’t really up to it. For the time being I’m re-writing the rest of my components to not use the shadow DOM instead which is a shame but I’ve hit a time wall and have to deliver, but it would be interesting to know if you have any plans in this direction.



There shouldn’t be a lot needed to make things work inside a shadow dom. One issue I can think of is that DOMNode.contains doesn’t see through shadow DOMs, so the call in the flush method in edit/main.js is likely to cause problems. This is something I’d be interested in supporting, but I’m not testing against it at the moment and have other priorities.


OK thanks.



currently we use Quilljs as our editor in our Polymer 1 based app. We are going to migrate to Polymer 2 with Shadow DOM v1. But this is causing major issues with the Quill editor. But the Quill maintainers are not really keen to support Shadow DOM.

A WYSIWYG Editor is very critical for our app and I am looking for alternatives. I was seeing some effort in your side to support it. And the ProseMirror architecture seems to be much cleaner and more extensible to me! I also appreciate the TypeScript typings for the ProseMirror packages!

So what I would like to evaluate is how one could implement a EditorView which takes care of the different environments it runs in. Shady DOM, Shadow DOM and without.

In general we would need to abstract the reading and setting the selection on the document, on a shadowRoot and shadyRoot using the official webcomponents polyfills. And maybe take care of of the MutationObserver changes within a WebCompinent shadow root.

I checked many editors and non of them is supporting Shadow DOM so far. I think that this would give this editor much more attention.

I wanted to ask you about your priorities on this topic.

Cheers, Oleg

Kind regards from Zürich


I think the only significant obstacle to using ProseMirror in shadow DOM at this point is that selection management in Safari’s shadow DOM is kind of broken (see this issue). Other than that, the editor should be usable.