Disable ShadowDOM

If you want to customize components using global CSS, you can do so by disabling the ShadowDOM.

By default, a ShadowDOM is used with certain components to ensure that your application’s CSS does not interfere with the styling of the SDK components.

If you want your application’s CSS to affect the styling of certain SDK components, you can disable the ShadowDOM.

There are different properties and methods that can be used to disable the ShadowDOM of individual components.

Examples:

<VeltComments
  shadowDom={false}
  dialogShadowDom={false}
  pinShadowDom={false}
  textCommentToolShadowDom={false}
  textCommentToolbarShadowDom={false}
/>


<VeltCommentBubble shadowDom={false} />
<VeltCommentTool shadowDom={false} />
<VeltSidebarButton shadowDom={false} />
<VeltCommentsSidebar shadowDom={false} />
<VeltCommentPlayerTimeline shadowDom={false} />
<VeltVideoPlayer shadowDom={false} />
<VeltNotificationsTool shadowDom={false} panelShadowDom={false} />
<VeltNotificationsPanel shadowDom={false} />

API Methods:

const commentElement = client.getCommentElement();
commentElement.enablePinShadowDOM();
commentElement.disablePinShadowDOM();
commentElement.enableDialogShadowDOM();
commentElement.disableDialogShadowDOM();
commentElement.enableSidebarShadowDOM();
commentElement.disableSidebarShadowDOM();

Was this page helpful?

ThemesDark Mode