If you would like to evaluate Guides and Surveys, please reach out to a member of your account team or fill out this form to be connected with a Fullstory team member.
Who can use this feature?
- Part of Guides and Surveys, an add-on for Business, Advanced, and Enterprise plans.
- Requires an Admin, Architect, or Standard role to configure.
Guides and Surveys is in active development. Product functionality and documentation may change without notice.
Some websites, often those built with web components, hide parts of their page inside a browser feature called the Shadow DOM—a sealed-off section of the page that standard element selectors cannot reach. Guides and Surveys can still target elements inside these areas, but doing so requires a special selector syntax to point to the correct location. For background on element selectors in general, see Finding Element Selectors on Your Website.
Note: The Shadow DOM must be in open mode. Guides and Surveys can only reach into shadow areas created with mode: 'open'. If a component uses mode: 'closed', its contents are hidden from all outside scripts, including Guides and Surveys, and no selector will work.
Targeting elements inside Shadow DOM
Wherever you would normally enter a CSS selector, wrap the shadow host element in UsetifulShadowDom(), then add the selector for the element you want to target inside it:
UsetifulShadowDom(#the-web-component) .button-inside
-
#the-web-component: The element on the page that holds the shadow area (the host). -
.button-inside: The element inside the shadow area that you want to target.
Supported functionality
- You can attach a guide step pointer to an element inside the Shadow DOM.
- You can launch a survey or checklist when a user clicks an element inside the Shadow DOM.
Limitations
- Embedded surveys and checklists: cannot target elements inside the Shadow DOM. Embed placement inserts the survey or checklist directly at the target element's location on the page, and the Shadow DOM boundary prevents that insertion. Use the default modal or floating placement instead, or embed the survey or checklist into a regular element outside the shadow area.
Frequently Asked Questions
Does Shadow DOM support work for nested shadow trees?
No. Shadow DOM support works one layer deep, for a shadow area that sits directly on the page. If a shadow area is nested inside another shadow area, Guides and Surveys cannot reach into the nested area.
How do I find the shadow host element on my page?
If you are unsure which element is the host, look for a custom-named tag on the page, such as <my-widget>. Custom-named tags are commonly used for the host elements of web components.