DOM
64 bites tagged DOM — interview questions with model answers, and 60-second explainers.
React's Two-Step Update: Render and Commit
React updates the screen in two phases. The "render" phase is React calling your components to calculate the UI. The "commit" phase is when it actually updates the DOM. The footgun is thinking rendering always changes the screen; it's just the prep work.
React's SyntheticEvent: One Wrapper for All Browsers
React's SyntheticEvent is a browser-agnostic wrapper around native events, ensuring your `onClick` handlers behave identically everywhere. The main footgun: event objects are pooled for performance, so you can't access their properties in an async callback.
React Refs: An Escape Hatch for DOM Manipulation
A ref is an escape hatch to directly access a DOM node, bypassing React's declarative state flow. Use it for imperative actions like focusing an input or scrolling to an element. The footgun: overusing refs can conflict with React's rendering.
The `act()` Utility: Syncing Tests with React's Updates
The `act()` utility ensures your tests wait for React to finish updating the DOM before you make assertions. Use it to wrap component renders and state updates. The footgun is forgetting to use `await` with an async function, which can lead to flaky tests.
Style Encapsulation with Shadow DOM
Shadow DOM creates a private DOM tree for a component, acting like a one-way mirror for CSS. This prevents style collisions in complex UIs, ensuring a button's CSS doesn't break a header.
CSS Combinators: Targeting by Relationship
CSS combinators target elements by their DOM relationship, not just class or ID. They let you select an element inside another (`div p`) or right next to one (`h2 + p`). This is key for styling nested menus or spacing adjacent items.
The `inert` Attribute: Making UI Sections Unreachable
The `inert` attribute makes a part of the DOM non-interactive and inaccessible. It's like a glass pane over a UI section: you can see it, but can't click, focus, or use a screen reader on it. Use it for off-screen menus or inactive dialogs.
The Accessibility Tree: The DOM for Assistive Tech
The accessibility tree is the DOM's sibling, built for assistive tech. Browsers derive it from your HTML, exposing each element's name, role (e.g., 'button'), and state (e.g., 'checked') to screen readers.
tabindex: Control Element Focus and Tab Order
The `tabindex` attribute lets you control an element's keyboard focus. Use `tabindex="0"` to make custom components tabbable in document order, or `tabindex="-1"` to make an element focusable only by script, like for a modal.
ElementInternals: Making Custom Elements Form-Friendly
ElementInternals lets your custom elements act like native form inputs, integrating with validation, submission, and labels. Use it for custom inputs in a design system. The footgun: forgetting to call `setFormValue()` means its state won't be submitted.
Shadow DOM: A Private Bubble for Your Components
Shadow DOM gives a component a private bubble, keeping its styles and structure isolated from the main page. This is key for building reusable Web Components and microfrontends.
CustomEvent: Sending Custom Data with Events
CustomEvent lets components communicate without direct coupling by firing custom-named events. It's like a private broadcast system for your app. Use it for a child component to signal a parent, passing data in the `detail` property. Don't forget `detail`!
HTML Slots: Making Web Components Customizable
The `<slot>` element is a placeholder inside a Web Component, letting you inject your own markup. It makes components flexible, like a card with customizable header and body sections. The footgun: content without a `slot` attribute goes to the default slot.
The HTML <template> Element: Inert, Reusable Markup
Think of `<template>` as a blueprint for HTML. It holds markup that's invisible and inactive until you need it, perfect for creating reusable chunks like list items that you can stamp out with JavaScript.
Custom Elements: Create Your Own HTML Tags
Think of Custom Elements as creating your own Lego bricks for the web, defining new HTML tags with custom logic. Use them to build reusable components like a `<product-card>`. Be wary of extending built-in elements, as Safari does not support this.
CSS Inheritance: Styles Flow Downhill
CSS inheritance is like genetics for web elements: children inherit styles like `color` and `font-family` from their parents. This is why setting a font on `<body>` styles a whole page.
Get DOM bites daily.
Five a day, five minutes, offline. With quizzes so it sticks.
Open testing — you’ll join as an early tester.