Your idea isn't stupid at allin fact, you've essentially just described the
foundational concept of a Single Page Application (SPA) router or a
Micro-frontend orchestrator. Combining multiple projects into one DOM to share
state is a very powerful pattern.
However, we can simplify your approach to the "insulating divs" and event
bleed-through. Instead of stacking views and using opaque blocking layers,
modern web development relies on CSS display: none. When a DOM element is set
to display: none, it is removed from the render tree entirely. This means zero
mouse event bleed-through, zero keyboard/tabbing bleed-through, and zero
performance cost for the inactive displays.
Here is a clean, dependency-free Vanilla JavaScript solution you can drop into
any project.
The JavaScript Helper (DisplayManager.js)
This script creates a singleton manager that injects a top-level container
over your existing website. When you switch to the default view, this
container simply hides itself, revealing the original DOM underneath.

==

How to use it in your project
Because we exported it to the window object, any script loaded after it can
easily add views and switch between them while sharing the exact same window
and document variables.
/ 1. Check what displays exist (will just be ['default'] initially)
console.log(DisplayManager.list()); 

/ 2. Add a new Project/Display using an HTML string
DisplayManager.add('dashboard-app', `
  <div style="padding: 20px; font-family: sans-serif;">
    <h1>Dashboard Project</h1>
    <button onclick="DisplayManager.switchTo('default')">Back to
Default</button>
  </div>
`);

/ 3. Add a new Project using DOM Elements (useful if initializing a React/Vue
app)
const mapAppContainer = document.createElement('div');
mapAppContainer.innerHTML = '<h1>Interactive Map</h1><p>Full screen map goes
here.</p>';
mapAppContainer.style.background = '#eef';
mapAppContainer.style.height = '100%';

DisplayManager.add('map-app', mapAppContainer);

/ 4. Switch to the Dashboard
DisplayManager.switchTo('dashboard-app');

/ 5. Switch to the Map
/ DisplayManager.switchTo('map-app');

/ 6. Return to your original website/DOM view
/ DisplayManager.switchTo('default');

Why this architecture works well:
Namespace Sharing: Because everything is ultimately living in document.body,
all your projects share the same window, variables, and local storage
seamlessly.
True Event Isolation: By utilizing CSS display: none instead of opacity or
z-index stacking, inactive views literally don't exist as far as the browser's
interaction engine is concerned. You don't have to worry about a button click
accidentally passing through to a hidden project.
Accessibility (a11y): Screen readers will completely ignore the inactive
displays, whereas stacking transparent divs can cause a nightmare for users
relying on keyboard navigation.
Clean Original DOM: The default view relies on your original DOM remaining
untouched. We just throw a fixed blanket (#v-display-root) over it when
running the virtual apps.