Shadow DOM selection Error

[flyrk]

Hi !

I notice that in visualize package, the interaction.ts file has this:

public selection = (event: Interaction.SelectionEvent): void => {
    let data = event.data;
    let doc = this.state.window.document;
    let s = doc.getSelection();
    // Wrapping selection code inside a try / catch to avoid throwing errors when dealing with elements inside the shadow DOM.
    try { s.setBaseAndExtent(this.layout.element(data.start as number), data.startOffset, this.layout.element(data.end as number), data.endOffset); } catch (ex) {
      console.warn("Exception encountered while trying to set selection: " + ex);
    }
  };

And when I run clarity in my website, I have encoured this problem. My page has some shadow dom element, and when I select something including shadow dom, the error would happen when I replay the record with visualize. And then my dom element cannot be rendered correctly.

what should I do to prevent this error? I'm looking for your help, thanks.

[sagarkm]

I am unable Ionic Web Component in my Ionic React application, and Ionic too makes use web components that heavily rely on Shadow DOM. Does Clarity supports such Shadow Dom based web pages?

[cipoleon]

I think I have the same problem. My clarity do not have the ":host" styles, because of Shadow DOM.