#Styling the Diff

#Your App's CSS is Preserved

Your app's existing CSS continues to work exactly as before.

When you render a diff using HTML Diff, it only adds data-diff-status attributes to highlight changes. It does not modify your existing HTML structure or styling. The exception is when you opt in to specific behaviors using data-diff-mode attributes, which allows for more control over how diffs are displayed.

Each changed element receives one of these attributes:

• data-diff-status="added" — applied to newly added elements
• data-diff-status="modified" — applied to modified elements
• data-diff-status="removed" — applied to removed elements

#Example: Your Styling is Preserved

<!-- Your original component -->
<button class="primary-btn large-size" id="submit-btn" data-diff-key="btn1">
  Submit Order
</button>

<!-- After diff processing (text changed) -->
<button
  class="primary-btn large-size"
  id="submit-btn"
  data-diff-key="btn1"
  data-diff-status="modified"
>
  Complete Purchase
</button>

Notice how:

• Your primary-btn and large-size classes remain untouched
• Your id and data-diff-key attributes are preserved
• Only data-diff-status="modified" was added to highlight the change
• All your existing CSS for .primary-btn and .large-size continues to work

#Default Styles

A default stylesheet is provided with the package:

import "@lix-js/html-diff/default.css";

Or, add it to your HTML:

<link rel="stylesheet" href="/node_modules/@lix-js/html-diff/default.css" />

#Custom Styling

You can override these styles in your own CSS for custom themes or branding:

.my-diff-root [data-diff-status="added"] {
  color: #080;
  background: #efe;
}
.my-diff-root [data-diff-status="modified"] {
  color: #f60;
  background: #ffc;
}
.my-diff-root [data-diff-status="removed"] {
  color: #b00;
  background: #fee;
}

#Styling Strategy

Because diff metadata is attached via data-diff-status, your components keep their original classes intact. You simply target the attribute in CSS:

<!-- Original -->
<div class="card featured">Content</div>

<!-- After diff (added) -->
<div class="card featured" data-diff-status="added">Content</div>

<!-- After diff (modified) -->
<div class="card featured" data-diff-status="modified">Content</div>

You can now scope your override styles with attribute selectors and a wrapper around the rendered diff.

#CSS Specificity Tips

Attribute selectors have the same specificity as classes. Bare selectors like [data-diff-status="added"] can lose to app content styles such as .content h2, .prose a, pre code, or .pricing-table td, especially when those rules load later or have higher specificity.

Prefer scoping diff styles under the element that contains the rendered diff:

.my-diff-root [data-diff-status="added"] {
  color: #080;
  background: #efe;
}
.my-diff-root [data-diff-status="modified"] {
  color: #f60;
  background: #ffc;
}
.my-diff-root [data-diff-status="removed"] {
  color: #b00;
  background: #fee;
  text-decoration: line-through;
}

If your app has stronger content selectors, match that context in your diff styles:

.my-diff-root .content [data-diff-status="added"] {
  color: #080;
}
.my-diff-root .content [data-diff-status="modified"] {
  color: #f60;
}
.my-diff-root .content [data-diff-status="removed"] {
  color: #b00;
}

This ensures your app's layout and design remain intact while only the diff highlighting is added on top.