Inability to style rc-tour used in a custom web component due to it being placed in the document.body by default

Hello.

I am currently working on using the rc-tour component in an Antd 4.24.x project but I couldn't get the rc-tour divs (rc-tour-mask, rc-tour-target-placeholder, and rc-tour) to be placed within the custom web component being used.

The custom web component contains the stylings which apply to the web component alone and we don't want the styles to leak out of the component. Also, we don't want to manage a separate styles file which can be placed on the page as different page sections have different colour theme styles. We want the rc-tour theme to be controlled by the webcomponent.

Has the team explored the use of a getContainer prop which then gets passed to the Portal components within the rc-tour for such placements similar to Antd Tooltips and Popovers?

Will be glad to put in a PR for it if this use case hasn't been explored yet.

Start by tracing how rc-tour renders its mask, target placeholder, and tour through its Portal components, then compare the requested container behavior with Ant Design Tooltips and Popovers. Done means a getContainer option can place those elements inside a custom web component without requiring page-level theme styles.