Helpers

Mutation Observer

semantic HTML

DOM 변경을 선언적 이벤트로 제공합니다.

stablefreeSince 0.4

Live example

Initial node

Waiting for mutation

<section data-standard-component="mutation-observer"><div class="example-observer-target"><span>Initial node</span></div><button type="button" data-example-action="mutate">Add node</button><output data-example-output aria-live="polite">Waiting for mutation</output></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.4`
HTML contract	`Native HTML elements and attributes`
Events	`Native browser events`

Accessibility

DOM 변경이 중요한 상태 변화라면 x-mutation을 status 또는 alert live region에 반영하고 포커스를 임의로 이동하지 않습니다.

Server template guidance

<!-- Render the semantic HTML on the server. Load enhancement JavaScript only when this interaction is needed. -->