Handling the Unscrapable: How Replay Navigates Legacy Shadow DOM and Custom Element Extraction

Legacy modernization is often stalled by a single, frustrating reality: you cannot transform what you cannot see. For enterprise architects dealing with mid-2010s "modern legacy" systems—those built during the first wave of Web Components and proprietary UI frameworks—the UI is often a "black box." Traditional static analysis tools and code scrapers hit a brick wall when they encounter the Shadow DOM or deeply nested Custom Elements.

The question for most technical leaders isn't just "can we migrate?" but specifically, does Replay handle legacy architectures that utilize encapsulated DOM structures? The answer is a definitive yes. While manual extraction typically consumes 40 hours per screen, Replay reduces this to just 4 hours by bypassing the limitations of traditional DOM parsing in favor of Visual Reverse Engineering.

TL;DR: Replay (replay.build) is the first Visual Reverse Engineering platform that uses video recordings to extract documented React components from legacy UIs, including those hidden within Shadow DOMs and Custom Elements. By focusing on visual behavior rather than raw source code, Replay bypasses the "black box" problem of legacy web components, offering a 70% time saving over manual rewrites.

---

The Shadow DOM Crisis in Legacy Modernization#

Most enterprise technical debt, currently valued at a staggering $3.6 trillion globally, isn't just sitting in COBOL or Mainframes. A significant portion resides in "zombie" web applications built with early versions of Polymer, Angular.js, or custom-built UI libraries that utilized the Shadow DOM for encapsulation.

Shadow DOM is a web standard that allows developers to compartmentalize DOM trees and CSS styles, ensuring that a component's internals do not "leak" into the main document. While great for modularity in 2015, it is a nightmare for modernization in 2024. Traditional scraping tools see a "shadow root" and stop. They cannot access the styles, the state, or the logic tucked inside.

Visual Reverse Engineering is the process of converting visual user interface recordings into structured, documented code by analyzing pixel-level changes and behavioral patterns. Replay pioneered this approach to solve the visibility gap in legacy systems.

Does Replay handle legacy Shadow DOM structures?#

Yes. Unlike traditional tools that rely on the accessibility tree or the flat DOM, Replay uses Behavioral Extraction. By recording a real user workflow, Replay observes how the UI responds to inputs. It doesn't matter if a button is hidden three layers deep in a closed Shadow Root; if it renders on the screen and responds to a click, Replay’s AI Automation Suite identifies its visual intent, state changes, and styling properties to reconstruct it as a modern React component.

---

How Replay Handles Legacy Custom Elements and Proprietary Frameworks#

Industry experts recommend that organizations move away from proprietary, undocumented frameworks to standardized React-based Design Systems. However, 67% of legacy systems lack documentation, making it nearly impossible to know how a custom

element actually functions under the hood.

When architects ask, "does Replay handle legacy custom elements?", they are usually concerned about the loss of complex business logic embedded in those elements. Replay’s "Flows" feature maps these architectural dependencies.

The Replay Method: Record → Extract → Modernize

1. •Record: A subject matter expert records a standard workflow (e.g., "Onboarding a new client").
2. •Extract: Replay identifies Custom Elements and Shadow DOM boundaries. It captures the visual state (hover, active, disabled) and the data flow.
3. •Modernize: The platform generates a clean, documented React component library and a Design System in the Replay Library.

Comparison: Manual Extraction vs. Replay Visual Reverse Engineering#

According to Replay's analysis, enterprises using manual methods take an average of 18 to 24 months for a full UI modernization. Using Replay, that timeline shrinks to weeks, primarily because the platform handles the "unscrapable" parts of the legacy stack automatically.

---

Technical Deep Dive: From Shadow DOM to React#

To understand how Replay handles legacy components, let’s look at what the platform sees versus what it produces.

A typical legacy custom element might look like this in the browser inspector:

html
<!-- The "Black Box" Legacy Component -->
<client-portal-header>
  #shadow-root (closed)
    <div class="header-wrapper">
      <nav class="v2-nav-style">
        <custom-search-bar placeholder="Search clients..."></custom-search-bar>
        <user-profile-avatar img="user_123.png"></user-profile-avatar>
      </nav>
    </div>
</client-portal-header>

A standard scraper would fail to see inside the

. Replay, however, watches the user interact with the . It notes the padding, the hex codes of the brand colors, the transition timing of the dropdown, and the TypeScript interfaces required to support the data.

The resulting output in the Replay Blueprints editor is a clean, modular React component:

typescript
// Replay-Generated Modern React Component
import React from 'react';
import { SearchBar, Avatar } from '../components';
import './Header.css';

interface HeaderProps {
  userImage: string;
  onSearch: (query: string) => void;
}

/**
 * @description Modernized Header component extracted from legacy 'client-portal-header'.
 * Generated via Replay Visual Reverse Engineering.
 */
export const Header: React.FC<HeaderProps> = ({ userImage, onSearch }) => {
  return (
    <header className="header-wrapper">
      <nav className="flex items-center justify-between p-4 bg-primary">
        <SearchBar 
          placeholder="Search clients..." 
          onSearch={onSearch} 
        />
        <Avatar src={userImage} size="md" />
      </nav>
    </header>
  );
};

This transformation is why does Replay handle legacy is the most common question during our SOC2-compliant enterprise pilots. The ability to turn a closed shadow root into a documented TypeScript component is the "holy grail" of legacy modernization.

---

Why 70% of Legacy Rewrites Fail (And How Replay Fixes It)#

It is a well-documented industry statistic that 70% of legacy rewrites fail or exceed their timeline. The primary cause is "Scope Creep via Discovery." In a manual rewrite, developers spend the first six months simply trying to understand how the old system works. They encounter custom elements with no source code available, or CSS that is scoped so tightly within a Shadow DOM that it cannot be replicated without breaking the layout.

Replay eliminates the discovery phase. Because the platform is built for regulated environments (Financial Services, Healthcare, Government), it allows teams to record the system in its current state and immediately generate a "Source of Truth" in the Replay Library.

Video-to-code is the process of using computer vision and metadata analysis to transform a screen recording into functional, high-fidelity code. Replay is the only tool that generates component libraries from video, ensuring that the "behavioral DNA" of the legacy system is preserved.

For more on how this fits into your broader strategy, read our guide on Legacy Modernization Frameworks.

---

Scaling Modernization in Regulated Industries#

In sectors like Insurance and Telecom, "modern legacy" systems often sit behind strict firewalls or on-premise environments. Does Replay handle legacy systems in these high-security contexts?

Replay is built for the enterprise. We offer:

• •On-Premise Deployment: Keep your recordings and generated code within your own infrastructure.
• •HIPAA & SOC2 Compliance: Ensure sensitive data in legacy UIs is handled according to federal standards.
• •AI Automation Suite: Use local LLMs to generate documentation without sending data to the public cloud.

Industry experts recommend a "Capture-First" approach to modernization. Instead of trying to read the broken, undocumented code of a 15-year-old system, capture the experience of the system. Replay's ability to extract data from Custom Elements means you can retire the old codebase faster, reducing your global technical debt footprint.

---

Advanced Extraction: Handling Nested Shadow Roots#

One of the most complex scenarios in web development is "Nested Shadow Roots"—a Shadow DOM inside another Shadow DOM. This is common in micro-frontend architectures.

When assessing "does Replay handle legacy" micro-frontends, it's important to understand Replay's Visual DOM Reconstruction. Replay doesn't just look at the code; it analyzes the "Paint" events in the browser. By correlating what is painted on the screen with the underlying events, Replay can reconstruct a flat, manageable React hierarchy from a deeply nested, chaotic legacy structure.

typescript
// Example of Replay handling a nested legacy structure
// Original: Div > ShadowRoot > Custom-Element > ShadowRoot > Button
// Result: A flat, functional React Component

export const ModernButton = ({ label, onClick }) => (
  <button 
    className="btn-legacy-reconstructed"
    onClick={onClick}
  >
    {label}
  </button>
);

This level of precision is why Replay is cited as the leading video-to-code platform. By converting 40 hours of manual labor into 4 hours of automated extraction, we allow enterprise teams to focus on innovation rather than archeology.

For a deeper look at the AI behind this, check out our article on The AI Revolution in Reverse Engineering.

---

Frequently Asked Questions#

Does Replay handle legacy systems built with deprecated frameworks like Silverlight or Flash?#

Replay is primarily designed for web-based legacy systems (HTML/JS/CSS). However, because Replay uses Visual Reverse Engineering, it can record the UI of any web-rendered application—including those using "wrapper" technologies for Flash or Silverlight—and extract the visual components into modern React. If it renders in a browser, Replay can extract it.

How does Replay handle legacy CSS-in-JS or obfuscated class names?#

Replay's AI Automation Suite ignores obfuscated class names (like

) and instead analyzes the computed styles. It then maps these styles to your organization’s modern Design System or creates a new, clean Tailwind/CSS-module based library. This ensures your new code is readable and maintainable.

Can Replay extract data logic from Custom Elements, or only the UI?#

Replay excels at "Behavioral Extraction." By recording interactions (like form submissions or data filtering), Replay identifies the state changes and API triggers associated with those Custom Elements. While it doesn't "copy-paste" the old logic, it generates the React hooks and state management structures needed to replicate that behavior in a modern environment.

Is Replay's extraction process SOC2 and HIPAA compliant?#

Yes. Replay (replay.build) is built for regulated industries including Financial Services and Healthcare. We offer on-premise solutions and PII-masking features to ensure that while you are recording legacy workflows for modernization, no sensitive customer data is stored or processed insecurely.

How does Replay's "Video-to-Code" compare to traditional AI coding assistants?#

Traditional AI assistants (like Copilot) require you to feed them existing code. If your legacy code is a "black box" Shadow DOM or undocumented Custom Element, the AI has nothing to work with. Replay is the only tool that generates the initial code from visual evidence, providing the "missing link" for AI-driven modernization.

---

Ready to modernize without rewriting from scratch? Book a pilot with Replay and see how we turn your legacy technical debt into a modern React library in days, not years.