Skip to content

lt-mirror querySelector cannot penetrate shadowRoot #11613

@13thKID

Description

@13thKID

Hi!

We've encountered the problem when the LanguageTool plugin is on. We're building our website using web-components (LitElement to be specific) and we noticed, that for some specific scenarios, the lt-mirror elements, cannot be connected with their consecutive inputs.

In the executor.js file, I read that at some point the following line is executed:

document.querySelectorAll("lt-mirror:not([data-lt-linked]), lt-highlighter:not([data-lt-linked])")

,which then connects the lt-mirror elements with the inputs if I'm interpretting the code correctly

However, in the presence of shadowRoot, the selector shown above won't work, which causes those lt-mirror elements to stay "unconnected" (it's worth adding, that it happens when the content is not slotted to the shadowRoot, but rather wrapped inside)

In other words, when the input is wrapped (not slotted) in the shadowRoot, there's data-lt-linked attribute missing in lt-mirror, which does not happen if the content is slotted:

Hopefully this clarifies the problem

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions