Bug: Binding to webcomponent shadow root fails

I’m working on converting lexical into an es6 module + webcomponent. I’ve been able to successfully bundle an es6 module (using webpack). Using it as a top-level component in the HTML document root works, but including it as a webcomponent doesn’t.

Lexical version: 0.25

Steps To Reproduce

1. import a bundled lexical.bundle.min.js file
2. bind Lexical to an editor in the root DOM (ie. document.getElementById(“editor”)), and observe that it works
3. bind Lexical to an editor in the shadow DOM (this.shadowRoot.querySelector(“#editor”), and observe that it doesn’t work.

• The shadow dom’s editor does receive attributes for data-lexical-editor=true among others
• The shadow dom does not receive key inputs

Link to code example:

https://user-images.githubusercontent.com/9470098/167487085-048ee412-6564-47cc-91f4-285bd9342a58.mov

https://github.com/yuzuquats/lexical-web-component

Any help would be appreciated! I’m fairly new to npm so if there’s anything obvious I’m missing I’d love to learn!

[yuzuquats]

FYI: seems like this might be a common problem and selection APIs across shadow DOM boundaries are being worked on

• https://github.com/quilljs/quill/pull/1805
• https://github.com/WICG/webcomponents/issues/79

In the meantime, I’ve opted to work around webcomponents with a simple class shim. Feel free to close this out unless you think there are better ways to work around this!

[trueadm]

Thanks for the comprehensive report and digging into the logic on this!