search

usablica / intro.js

Lightweight, user-friendly onboarding tour library
http://introjs.com
Other
22.79k stars 2.59k forks source link

Shadow Dom Support - Lit Element #1005

Closed zsarnett closed 3 years ago

zsarnett commented 4 years ago

Description

I am looking to integrate IntroJs into my project. I am using Lit Element and Web components. An issue I am encountering is that Intro JS seems to insert the overlays, and layers into the body of the page instead of the current dom. Because the outside dom has no idea what is in the inner doms as well as the other way around this makes it difficult to use. Is it possible to run Intro JS within a Shadow Dom and have it append the created divs inside it?

Expected Behavior

I expected Intro JS to append its Div elements to the inside of the current shadow dom or allow me to specify which element it should append these elements

Actual Behavior

Appended Elements to the body of the page

Errors and Screenshots (optional)

Give us any additional information if you have.

Example (recommended)

How can someone else see/test this issue? List the steps or write some code; or create a jsfiddle or codepen. image

in the image you can see how at the bottom the Introjs elements were inserted into the body but the real element that is step one is located 7 shadow doms deep

zsarnett commented 4 years ago

Basically, what I am asking for is do you have something that is similar to Shepard's modalContainer?

modalContainer An optional container element for the modal. If not set, the modal will be appended to document.body.

stale[bot] commented 3 years ago

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

zsarnett commented 3 years ago

Not sure if this has been addressed yet

stale[bot] commented 3 years ago

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

zsarnett commented 3 years ago

Not sure if this has been addressed yet

stale[bot] commented 3 years ago

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

zsarnett commented 3 years ago

Shadow Dom is Great!

afshinm commented 3 years ago

Hey @zsarnett

You can use useRef and pass the currentNode to Intro.js: https://codesandbox.io/s/introjs-shadow-dom-qr1h0?file=/src/App.js

Intro.js supports both string CSS selector and DOM element.

stale[bot] commented 3 years ago

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

urswilke commented 4 months ago

I was also struggling with this. The problem was that in my case, I have lit elements nested within another lit element. See a small toy example repo here. When running introjs after the parent lit element has first updated, the children are not rendered yet. Therefore, I have to wait until the children are also rendered (see here).