setProp() — vue Function Reference

Architecture documentation for the setProp() function in style.ts from the vue codebase.

Function typescript WebPlatform WebRuntime calls 1 called by 1

Entity Profile

WebPlatform→ WebRuntime→ setProp() — vue Function Reference

Dependency Diagram

graph TD
  7b0a1c4d_a609_ae95_b6a4_79306b7d0902["setProp()"]
  39bcf580_b87a_fcd4_c4dc_38d5e8e0495a["style.ts"]
  7b0a1c4d_a609_ae95_b6a4_79306b7d0902 -->|defined in| 39bcf580_b87a_fcd4_c4dc_38d5e8e0495a
  003a8cc5_e342_06e8_ebe9_d399cfdefe0a["updateStyle()"]
  003a8cc5_e342_06e8_ebe9_d399cfdefe0a -->|calls| 7b0a1c4d_a609_ae95_b6a4_79306b7d0902
  707ffaaf_8565_59b6_e63d_66c2ac9eab68["normalize()"]
  7b0a1c4d_a609_ae95_b6a4_79306b7d0902 -->|calls| 707ffaaf_8565_59b6_e63d_66c2ac9eab68
  style 7b0a1c4d_a609_ae95_b6a4_79306b7d0902 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

src/platforms/web/runtime/modules/style.ts lines 14–37

const setProp = (el, name, val) => {
  /* istanbul ignore if */
  if (cssVarRE.test(name)) {
    el.style.setProperty(name, val)
  } else if (importantRE.test(val)) {
    el.style.setProperty(
      hyphenate(name),
      val.replace(importantRE, ''),
      'important'
    )
  } else {
    const normalizedName = normalize(name)
    if (Array.isArray(val)) {
      // Support values array created by autoprefixer, e.g.
      // {display: ["-webkit-box", "-ms-flexbox", "flex"]}
      // Set them one by one, and the browser will only set those it can recognize
      for (let i = 0, len = val.length; i < len; i++) {
        el.style[normalizedName!] = val[i]
      }
    } else {
      el.style[normalizedName!] = val
    }
  }
}