Shadow DOM Overlay Insertion

The Problem

When component A (e.g. EFCanvas) tries to insert an overlay into the DOM next to itself, it typically uses this.parentElement.appendChild(overlay). This breaks when A is slotted inside a shadow DOM host (e.g. EFWorkbench).

EFWorkbench (shadow host)
  shadow root
    <div class="canvas-slot-container">   ← the real DOM parent
      <slot name="canvas">                ← slot element
        [EFCanvas is assigned here]       ← light DOM, assigned via slot

• efCanvas.parentElement returns the shadow host (EFWorkbench), not the internal container
• Calling shadowHost.appendChild(overlay) places the overlay in the host's light DOM, where CSS and z-index from the shadow DOM won't apply — the overlay is invisible

The Fix Pattern