Feature: Editor within Custom Element Shadow DOM

[johnstonmatt]

I would like to be able to instantiate a lexical editor bound to an element within a Shadow DOM. When lexical is configured in this way it fails to properly process updates to that element's contents. I believe that the project has a huge opportunity here, maybe even something like a <lexical-composer> custom element, bringing the vanilla DX closer to React's.

I am happy to implement my own editor as a user as well of course, but that requires a fix for processing updates to the editor element contents in a ShadowRoot.

[StyleT]

Hi! Can you provide some code sandbox (e.g. fork https://stackblitz.com/github/facebook/lexical/tree/main/examples/vanilla-js?file=src%2Fmain.ts) with an example of the issue?

If you do, it will help a lot with resolution ;)

[adrian-bobev]

Hi! Can you provide some code sandbox (e.g. fork https://stackblitz.com/github/facebook/lexical/tree/main/examples/vanilla-js?file=src%2Fmain.ts) with an example of the issue?

If you do, it will help a lot with resolution ;)

@StyleT, I also have the same problem. If the contenteditable div is placed inside shadowRoot the editor does not work. If the div is in the light dom, everything is working as expected.

I suppose the problem is that getSelection is not working in shadowRoot.

Here is isolated example of the problem: https://stackblitz.com/edit/vitejs-vite-ardtzj?file=src%2Fmy-element.ts

[abishek-srinivasan]

Hello @StyleT @adrian-bobev @johnstonmatt . I have been facing the same issue. Did we have a chance to find some workaround for this or any idea on whether this issue was fixed in recent versions of lexical?

[adrian-bobev]

@abishek-srinivasan The only workaround that I found is to place the contenteditable div inside the light DOM