Debug wrong DOM attributes in unknown framework

Quick Overview

This question evaluates a candidate's ability to debug frontend DOM attribute mismatches by understanding framework-specific attribute/prop reflection, template/JSX compilation, SSR/hydration differences, and build-toolchain interactions.

Debug wrong DOM attributes in unknown framework

Company: Stripe

Role: Software Engineer

Category: Software Engineering Fundamentals

Difficulty: medium

Interview Round: Technical Screen

In an unfamiliar frontend framework, rendered DOM tags contain incorrect attributes (for example, className vs class, mis-cased data-* attributes, or boolean props serialized incorrectly). Outline a step-by-step debugging plan: create a minimal reproduction, inspect the template-to-DOM compilation or JSX/TSX transforms, check SSR vs client hydration mismatches, verify component prop passthrough and attribute reflection for custom elements, audit build tooling and plugins, and confirm reserved or framework-specific props. Show how you would isolate the root cause, implement a fix, add safeguards (lint rules, type checks, tests), and prevent regressions.

Quick Answer: This question evaluates a candidate's ability to debug frontend DOM attribute mismatches by understanding framework-specific attribute/prop reflection, template/JSX compilation, SSR/hydration differences, and build-toolchain interactions.

|Home/Software Engineering Fundamentals/Stripe
Stripe logo
Stripe
Sep 6, 2025, 12:00 AM
mediumSoftware EngineerTechnical ScreenSoftware Engineering Fundamentals
7
0

Frontend Debugging Plan: Incorrect DOM Attributes in an Unfamiliar Framework

Context

You join a team using an unfamiliar frontend framework. In the browser DevTools, rendered DOM elements show incorrect attributes (e.g., className rendered instead of class, mis-cased data-*/aria-* attributes, or boolean props serialized as strings). You need to quickly isolate the root cause, implement a fix, and prevent regressions.

Task

Outline a step-by-step debugging plan that covers:

  1. Creating a minimal reproduction.
  2. Inspecting template-to-DOM compilation or JSX/TSX transforms.
  3. Checking SSR vs client hydration mismatches.
  4. Verifying component prop passthrough and attribute reflection (especially for custom elements).
  5. Auditing build tooling and plugins.
  6. Confirming reserved or framework-specific props behavior.
  7. Isolating the root cause, implementing a fix, and adding safeguards (lint rules, type checks, tests) to prevent regressions.
Loading comments...