CSS Custom Properties inherit ลงมาตาม DOM — override ได้ที่ระดับ component

CSS Custom Properties สืบทอดค่าผ่าน DOM tree เหมือน color หรือ font-size:

:root {
  --color-primary: #2563eb;
}

.card {
  --color-primary: #7c3aed; /* override สำหรับ .card และลูกๆ */
}

.card .btn {
  /* ได้ --color-primary: #7c3aed จาก .card */
  background: var(--color-primary);
}

.other-btn {
  /* ได้ --color-primary: #2563eb จาก :root */
  background: var(--color-primary);
}

ทำให้ pattern “theme per component” ง่ายมาก — override variable ที่ scope ของ component แล้วทุกอย่างข้างในเปลี่ยนตามโดยอัตโนมัติ

ใช้คู่กับ @property เพื่อกำหนด syntax type, initial value, และ inherit behavior ได้ละเอียดกว่าเดิม — เช่น ทำให้ variable transition animate ได้