MutationObservables and HighlightedSelectors not working with Shadow DOM

[MarcLopezAvila]

Describe the bug Tour works with content in Shadow DOM since it can accept selectors as element, so we can supply an element like: node.shadowRoot.querySelector('some-selector'), but when we want to introduce a mutationObservables list, it only accepts CSS classes making it impossible to react to some change inside a shadow root (since it is not currently possible to access elements inside shadow root from a CSS selector from the outside), for example, a modal that just opened.

To Reproduce Steps to reproduce the behavior:

1. Create a Web component with a shadow root attached.
2. Integrate React tour passing steps and selectors as elements (which it works)
3. Open a modal that the Step should highlight listening to the change with mutationObservables
4. See error: Nothing happens since it can't access elements inside a shadow root.

Expected behavior Work as the example in React Tour Style guide where the modal is focused. Not sure how the actual solution should look like, because the element is not in the DOM so it can't be accessed with a query yet, probably a new actionAfterAsync?

Desktop (please complete the following information):

• OS: MacOS Monterey
• Browser Chrome
• Version 103.0.5060.134

React Tour is a great module and it would be great if it can be integrated in an isolated micro frontend, which is the way most of modules are built inside a big app to avoid collisions between them.

[elrumordelaluz]

Hi @MarcLopezAvila, thanks for open the Issue.

Mind creating a minimal reproduction in a sandbox in order to allow to debug your use-case and try to find a solution? Thanks!

[MarcLopezAvila]

https://codesandbox.io/s/react-tour-shadow-dom-0i1192

Inside index.js switch between ShadowDOMComponent and WebComponent and you will see that in ShadowDOMComponent the mutationObservables don't work.

In addition I added getStepsAsyncAction as a possible improvement for actionAfter, being it async so we also have a way to define the steps sequentally, so the next have to wait until the previous step actionAfter is resolved.

[MarcLopezAvila]

Hi @elrumordelaluz can you confirm that this is a bug? Any hint or workaround that you can think of in that case?

Thanks!

[elrumordelaluz]

hi @MarcLopezAvila I saw your sandbox and can confirm that is a thing that must be fixed or at least studied. Let me deep dive inside and try to patch as soon as possible. As always PR open if you want to!

[MarcLopezAvila]

Hi @elrumordelaluz any updates or thoughts on this? Thanks!