Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Bug: Binding to webcomponent shadow root fails

See original GitHub issue

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:

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!

Issue Analytics

  • State:open
  • Created a year ago
  • Reactions:5
  • Comments:9 (4 by maintainers)

github_iconTop GitHub Comments

yuzuquatscommented, May 11, 2022

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

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!

trueadmcommented, May 11, 2022

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

Read more comments on GitHub >

github_iconTop Results From Across the Web

Selection APIs for Shadow DOM #79 - GitHub
Title: [Shadow]: Find a way for selection to work across shadow DOM subtrees ... Bug: Binding to webcomponent shadow root fails facebook/lexical#2119. Open....
Read more >
806506 - Implement web components ShadowRoot interface.
The range is disconnected and the selection ends up getting cleared, but the selection still remains painted. You can reproduce this now by...
Read more >
Click event not firing when React Component in a Shadow DOM
I added a 'retargetEvents' method which binds all the possible event types to the container. It then will dispatch the correct React event...
Read more >
Shadow DOM v1 - Self-Contained Web Components
Subtle bugs creep up, CSS specificity becomes a huge issue ( !important all ... Shadow DOM is one of the three Web Component...
Read more >
348991 - DevTools cannot edit content in shadow DOM
Steps to reproduce the problem: 1. Visit ... 3. Right-click the text two lines ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found