CSSOM은 CSS 규칙을 브라우저가 다룰 수 있는 객체 모델입니다. 선택자가 DOM 요소와 맞으면 해당 선언이 스타일 계산에 참여합니다.
데모에서 선택자 빔이 요소에 닿으면 색이 바뀝니다. 규칙의 우선순위와 상속을 함께 계산하므로, CSS 파일을 읽었다는 사실만으로 최종 색이 확정되지는 않습니다.
언제 쓰나
선택자 충돌이나 스타일 계산 비용을 추적할 때 DOM과 함께 봅니다.
CSSOM 트리
CSSOM tree
CSS 규칙을 해석해 선택자와 선언을 연결한 스타일 구조를 만듭니다.
···
<div class="v"><header>CSSOM MATCH <span id="rule">.card</span></header><div class="stage match"><div class="rules"><div class="r" id="r0">.card { color }</div><div class="r" id="r1">.badge { fill }</div></div><div class="beam">→</div><div class="targets"><div class="t" id="t0">card</div><div class="t" id="t1">badge</div></div></div><div class="muted">selector → matched node → computed style</div></div>.v{width:min(94vw,760px);height:min(88vh,320px);padding:clamp(9px,2.4vmin,18px);border:1px solid var(--line);border-radius:12px;background:var(--surface);font:500 clamp(12px,2.4vmin,16px)/1.3 var(--font-sans,system-ui,sans-serif);display:flex;flex-direction:column;gap:clamp(5px,1.4vmin,10px);overflow:hidden}.v header{display:flex;align-items:center;justify-content:space-between;gap:8px;color:var(--accent);font-weight:700}.v header span{color:var(--muted);font-weight:500}.v .stage{flex:1;min-height:0;position:relative}.v .muted{color:var(--muted)}.v .active{background:color-mix(in srgb,var(--accent) 18%,var(--surface));border-color:var(--accent)!important;color:var(--fg)}.v button{font:inherit;color:var(--fg);background:var(--bg);border:1px solid var(--line);border-radius:7px;padding:5px 8px;cursor:pointer}.match{display:flex;align-items:center;justify-content:center;gap:clamp(6px,3vmin,30px)}.rules,.targets{display:flex;flex-direction:column;gap:8px}.r,.t{border:1px solid var(--line);border-radius:7px;padding:7px;background:var(--bg);min-width:94px;text-align:center}.r.on,.t.on{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 20%,var(--surface))}.beam{color:var(--accent);font-size:clamp(18px,4vmin,28px)}let i=0;function tick(){for(let j=0;j<2;j++){document.getElementById("r"+j).classList.toggle("on",i===j);document.getElementById("t"+j).classList.toggle("on",i===j)}document.getElementById("rule").textContent=i?".badge":".card";i=1-i}tick();setInterval(tick,1000)