quasarframework/quasar · error · TypeError

Expected a DOM element

Error message

Expected a DOM element

What it means

setCssVar(propName, value, element) defaults element to document.body but accepts any Element; it throws this TypeError when the passed element is not an instanceof Element. It needs element.style.setProperty(), which only real DOM elements expose.

Source

Thrown at ui/src/utils/css-var/set-css-var.js:9

export default function setCssVar(propName, value, element = document.body) {
  if (typeof propName !== 'string') {
    throw new TypeError('Expected a string as propName')
  }
  if (typeof value !== 'string') {
    throw new TypeError('Expected a string as value')
  }
  if (!(element instanceof Element)) {
    throw new TypeError('Expected a DOM element')
  }

  element.style.setProperty(`--q-${propName}`, value)
}

View on GitHub (pinned to 4841521b5f)

Solutions

1. Resolve the element first: setCssVar('primary', '#f00', document.querySelector('#app')).
2. Unwrap refs after mount: onMounted(() => setCssVar('primary', '#f00', elRef.value)).
3. Omit the element argument to target document.body.
4. Check element instanceof Element before calling when the element is dynamic.

Example fix

// before
setCssVar('primary', '#f00', '#app') // string selector, throws
// after
setCssVar('primary', '#f00', document.querySelector('#app'))

if (!(element instanceof Element)) throw new Error('setCssVar requires a DOM element')

const isDomElement = (el) => el instanceof Element

try {
  setCssVar('primary', '#f00', elRef.value)
} catch (err) {
  if (err instanceof TypeError && /DOM element/.test(err.message)) {
    setCssVar('primary', '#f00') // fall back to document.body
  } else throw err
}

When it happens

Trigger: setCssVar('primary', '#f00', null); passing a Vue template ref before mount (ref.value === null); passing a selector string; passing window.document; passing a jQuery-wrapped element.

Common situations: Theming a specific container scoped by ref called too early in the lifecycle; SSR where document is undefined so even the default fails; confusing CSS selector strings with DOM elements.

Related errors

• Expected a DOM element
• Expected a string as propName
• Expected a string as propName
• Expected a string as value
• Expected a string or a {r, g, b[, a]} object as bgColor

AI-assisted analysis of quasarframework/quasar@4841521b5f (2026-08-30). Data as JSON: /api/errors/d181f9fd9f2af860. Report an issue: GitHub.