Data
Diff View
semantic HTML두 텍스트 상태의 변경 내용을 의미론적 추가·삭제 행으로 표시합니다.
Live example
Title- Draft copy+ Published copy
<section data-standard-component="diff-view" aria-label="Content changes"><template data-diff-old>Title
Draft copy</template><template data-diff-new>Title
Published copy</template><pre class="standard-diff" data-diff-output><span>Title</span><del>- Draft copy</del><ins>+ Published copy</ins></pre></section>Variants and sizes
The pattern inherits theme and density tokens. Use compact, comfortable, or roomy density when the surrounding screen requires it.
compactcomfortableroomy
Public API
| Contract | Value |
|---|---|
| Implementation | semantic HTML |
| Status | stable |
| License | free |
| Since | 0.5 |
| HTML contract | Native HTML elements and attributes |
| Events | Native browser events |
Accessibility
변경 행을 텍스트로 제공하고 색상만으로 추가·삭제를 구분하지 않습니다.
Server template guidance
<!-- Render the semantic HTML on the server. Load enhancement JavaScript only when this interaction is needed. -->