A conflict between the styles of the extension's modal window and the page's styles

[kpripper]

Greetings! My extension has modal windows that are added by script to the page.

There is a conflict of styles - either the page styles affect the display of elements in the modal window, or vice versa.

What are the solutions?

I can write very specific classes or even inline styles in a modal window, but I don't like that option.

[sakibul-islam]

Use Shadow DOM

Shadow DOM encapsulates the modal's styles, preventing them from leaking out and being affected by the page's styles. This ensures that the modal's styling remains isolated.

You can create a shadow root for your modal element like this:

const modalElement = document.createElement('div');
const shadowRoot = modalElement.attachShadow({ mode: 'open' });
shadowRoot.innerHTML = `
    <style>
        /* Your modal styles go here */
    </style>
    <div class="modal-content">
        <!-- Modal content -->
    </div>
`;
document.body.appendChild(modalElement);

[kpripper]

Thanks! Or like this

import styles from './App.css'

  React.useEffect(() => {
    const styleElement = document.createElement('style')
    styleElement.textContent = styles
    document.querySelector('#app-root').shadowRoot.appendChild(styleElement)
  }, [])