import { VeltComments, useVeltClient } from '@veltdev/react';

import { useEffect } from 'react'

export default function YourDocument() {

  const { client } = useVeltClient();

  useEffect(()=>{

    if(client){
      const commentElement = client.getCommentElement();
      commentElement.enablePinShadowDOM();
      commentElement.disablePinShadowDOM();
    }
  })

  return (
    <div>
      <VeltComments pinShadowDom={false} />
    </div>
  )
}

Disable ShadowDOM

Whether the ShadowDOM is enabled or not on the Comment Pin

Default: enabled

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.

<VeltComments pinShadowDOM={false} />

API methods:

const commentElement = client.getCommentElement();
commentElement.enablePinShadowDOM();
commentElement.disablePinShadowDOM();