SHADOW_DOM_FIX.md

Shadow DOM Conflict Fix

Issue

After deployment, the application shows errors:

Failed to execute 'attachShadow' on 'Element': Shadow root cannot be created on a host which already hosts a shadow tree.

Root Cause

This error typically occurs when:

1. Browser extensions (password managers, ad blockers) inject their own shadow DOM elements
2. Deployment platform (AWS Amplify) injects monitoring/analytics scripts that conflict
3. Multiple attempts to attach shadow roots to the same element

Solutions Applied

1. Shadow DOM Conflict Prevention (index.html)

Added a script that intercepts attachShadow calls and prevents duplicate shadow root creation.

2. Additional Steps to Try

If the issue persists after deployment:

1. Check Browser Extensions

   • Test in incognito/private mode with all extensions disabled
   • Common problematic extensions: LastPass, 1Password, Grammarly, ad blockers

2. AWS Amplify Specific

   • Check if Amplify is injecting any monitoring scripts
   • In Amplify Console, go to App settings > Environment variables
   • Add: AMPLIFY_MONOREPO_APP_ROOT = . (if not already set)

3. Add CSP Headers (if needed) Create a customHttp.yml in your project root:

   customHeaders:
     - pattern: "**/*"
       headers:
         - key: "Content-Security-Policy"
           value: "script-src 'self' 'unsafe-inline' 'unsafe-eval';"

4. Alternative Fix - Vite Config If the issue is related to build optimization, you can try adding to vite.config.ts:

   build: {
     commonjsOptions: {
       transformMixedEsModules: true
     }
   }

Testing

1. Build locally: yarn build
2. Test production build: yarn preview
3. Check browser console for any shadow DOM warnings
4. Test in different browsers and incognito mode

Prevention

• Regularly test production builds locally
• Monitor for browser extension conflicts
• Keep deployment platform configurations documented