{"record":{"id":"d181f9fd9f2af860","repo":"quasarframework/quasar","slug":"expected-a-dom-element-d181f9","errorCode":null,"errorMessage":"Expected a DOM element","messagePattern":"Expected a DOM element","errorType":"exception","errorClass":"TypeError","httpStatus":null,"severity":"error","filePath":"ui/src/utils/css-var/set-css-var.js","lineNumber":9,"sourceCode":"export default function setCssVar(propName, value, element = document.body) {\n  if (typeof propName !== 'string') {\n    throw new TypeError('Expected a string as propName')\n  }\n  if (typeof value !== 'string') {\n    throw new TypeError('Expected a string as value')\n  }\n  if (!(element instanceof Element)) {\n    throw new TypeError('Expected a DOM element')\n  }\n\n  element.style.setProperty(`--q-${propName}`, value)\n}\n","sourceCodeStart":1,"sourceCodeEnd":14,"githubUrl":"https://github.com/quasarframework/quasar/blob/4841521b5f635a971eb9e2710e5542efd194691b/ui/src/utils/css-var/set-css-var.js#L1-L14","documentation":"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.","triggerScenarios":"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.","commonSituations":"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.","solutions":["Resolve the element first: setCssVar('primary', '#f00', document.querySelector('#app')).","Unwrap refs after mount: onMounted(() => setCssVar('primary', '#f00', elRef.value)).","Omit the element argument to target document.body.","Check element instanceof Element before calling when the element is dynamic."],"exampleFix":"// before\nsetCssVar('primary', '#f00', '#app') // string selector, throws\n// after\nsetCssVar('primary', '#f00', document.querySelector('#app'))","handlingStrategy":"type-guard","validationCode":"if (!(element instanceof Element)) throw new Error('setCssVar requires a DOM element')","typeGuard":"const isDomElement = (el) => el instanceof Element","tryCatchPattern":"try {\n  setCssVar('primary', '#f00', elRef.value)\n} catch (err) {\n  if (err instanceof TypeError && /DOM element/.test(err.message)) {\n    setCssVar('primary', '#f00') // fall back to document.body\n  } else throw err\n}","preventionTips":["Resolve selector strings with document.querySelector() before passing.","Wait for onMounted before applying scoped theming via template refs.","Check elRef.value is set (non-null) before calling.","Omit the element argument when theming the whole app."],"tags":["typeerror","css-var","dom-element","argument-validation","quasar"],"backgroundTag":"invalid-dom-element","analyzedSha":"4841521b5f635a971eb9e2710e5542efd194691b","analyzedAt":"2026-08-30T01:13:14.944Z","schemaVersion":2},"datasetVersion":"2026-08-30T03:17:51.788Z"}