Shadow Dom support in Syncfusion^® React Components

This guide shows you how to use Shadow DOM with Syncfusion^® React components to achieve DOM and style encapsulation in your React applications.

What is Shadow DOM?

Shadow DOM is a web standard that allows for encapsulation of a component’s DOM and styles. When a component uses Shadow DOM, its element structure and styles are hidden from the rest of the document, preventing style and DOM conflicts. This enables better style isolation and more robust, reusable components.

Create a Vite project

To create a new Vite project, refer to the Vite documentation. Once that Vite project is ready to run with default settings, let’s add the React components to the project.

Adding Syncfusion^® React components

To add Syncfusion^® React Message component follow these steps:

1. Install the necessary dependencies for React components.

npm install @syncfusion/react-notifications --save

2. Add the Message component in application as shown in below code example.

import { Message, Severity } from '@syncfusion/react-notifications';
import './App.css';

export default function App() {
    return (
    <div className="component-section">
        <Message severity={Severity.Success}>Your message has been sent successfully</Message>
    </div>
    );
}

Integrate React components with Shadow DOM

Syncfusion^® React components can be seamlessly rendered inside a Shadow DOM to achieve style and DOM encapsulation. Follow these steps:

1. To initialize your React application within a Shadow DOM root, add the following code to your main.tsx file.

import { StrictMode } from 'react'
import * as ReactDOM from 'react-dom/client';
import './index.css'
import App from './App.tsx'

const container = document.querySelector('#root');
const shadowContainer = container?.attachShadow({ mode: 'open' });
const shadowRootElement = document.createElement('div');
shadowContainer?.appendChild(shadowRootElement);

ReactDOM.createRoot(shadowRootElement).render(
  <StrictMode>
    <App />
  </StrictMode>,
)

2. Add the required CSS references as follows in src/App.css file.

@import '../node_modules/@syncfusion/react-base/styles/material.css';
@import '../node_modules/@syncfusion/react-notifications/styles/material.css';

3. Styles imported normally will not apply inside the Shadow DOM. To ensure your styles are correctly applied to elements within the Shadow DOM, users need to inject them manually. For example, you can include the following code in your main.tsx file:

import styles from './App.css?raw';

const style = document.createElement('style');
style.innerHTML = styles;
shadowContainer?.appendChild(style);

Run the project

Execute the following command to run the project:

npm run dev

The output will appear as follows: