{"record":{"id":"57c27067ed60784e","repo":"Automattic/harper","slug":"expected-a-dom-element","errorCode":null,"errorMessage":"Expected a DOM Element","messagePattern":"Expected a DOM Element","errorType":"exception","errorClass":"TypeError","httpStatus":null,"severity":"error","filePath":"packages/lint-framework/src/lint/Highlights.ts","lineNumber":287,"sourceCode":"\t\tif (isContainingBlock(node)) {\n\t\t\treturn node.getBoundingClientRect();\n\t\t}\n\t\tnode = node.parentElement;\n\t}\n\n\treturn null;\n}\n/**\n * Determines whether a given element would form the containing block\n * for a descendant with `position: fixed`, based on CSS transforms,\n * filters, containment, container queries, will-change, and\n * content-visibility.\n *\n * Logs the element and the precise reason it qualifies.\n */\nfunction isContainingBlock(el: Element): boolean {\n\tif (!(el instanceof Element)) {\n\t\tthrow new TypeError('Expected a DOM Element');\n\t}\n\n\tconst style = window.getComputedStyle(el);\n\n\tconst filter = style.getPropertyValue('filter');\n\tif (filter !== 'none') {\n\t\treturn true;\n\t}\n\n\tconst backdrop = style.getPropertyValue('backdrop-filter');\n\tif (backdrop !== 'none') {\n\t\treturn true;\n\t}\n\n\tconst transform = style.getPropertyValue('transform');\n\tif (transform !== 'none') {\n\t\treturn true;\n\t}","sourceCodeStart":269,"sourceCodeEnd":305,"githubUrl":"https://github.com/Automattic/harper/blob/5fe7d5ab76492d83f3ecdbc3f1da83c75dcb6f83/packages/lint-framework/src/lint/Highlights.ts#L269-L305","documentation":"lint-framework's Highlights.isContainingBlock computes computed styles to detect containing blocks; it begins by asserting the argument is a DOM Element and throws TypeError('Expected a DOM Element') otherwise. This is called from getInitialContainingRect while mapping lint spans to on-screen rectangles, so it fires when highlight bookkeeping feeds a non-Element into containing-block resolution.","triggerScenarios":"Passing a non-Element into isContainingBlock while a DOM is present: el.parentElement returning null as the upward walk reaches the document root, a text or comment node arriving from a shadow-DOM or custom rendering path, or a detached placeholder swapped in mid-highlight. A DOM is required for this error to be reachable at all — the check is `el instanceof Element`, so an environment with no global Element (bare Node, SSR without DOM shims) raises ReferenceError: Element is not defined on that same line instead.","commonSituations":"Frameworks replacing nodes mid-highlight so parentElement is null by the time the lookup runs; shadow-DOM or custom renderers handing the highlighter a text node; jsdom setups that define Element but not the parent chain the walk expects.","solutions":["Guard the call site: skip isContainingBlock when the candidate is null or its nodeType is not 1 (Node.ELEMENT_NODE).","Update lint-framework to a version that handles a missing parent before calling isContainingBlock.","Check that the element you highlight inside is attached to the document and is an Element (nodeType 1).","In tests, provide a realistic DOM (jsdom with parent traversal) or mock getInitialContainingRect."],"exampleFix":"// before (SSR)\nconst highlights = new Highlights(editorEl); // runs during server render\n// after\nimport { browser } from '$app/environment';\nif (browser) {\n  const highlights = new Highlights(editorEl);\n}","handlingStrategy":"type-guard","validationCode":"if (typeof window === 'undefined') {\n  throw new Error('Highlights requires a browser DOM environment');\n}","typeGuard":"function isElement(v: unknown): v is Element {\n  return typeof Element !== 'undefined' && v instanceof Element;\n}","tryCatchPattern":"try {\n  const rect = highlights.getInitialContainingRect(lint);\n} catch (e) {\n  if (e instanceof TypeError && e.message === 'Expected a DOM Element') {\n    console.error('Highlighter ran outside a browser DOM; skip highlight setup.');\n  }\n  throw e;\n}","preventionTips":["Only initialize the highlight framework in browser contexts (guard against SSR)","Ensure the highlight target is attached and is an Element (nodeType 1)","In tests, use a DOM environment with full parent traversal or mock rect lookup"],"tags":["dom","highlighter","ssr","type-error"],"backgroundTag":"invalid-argument-value","analyzedSha":"5fe7d5ab76492d83f3ecdbc3f1da83c75dcb6f83","analyzedAt":"2026-09-06T11:34:38.610Z","contentChangedAt":"2026-09-11T14:57:23.451Z","schemaVersion":2},"datasetVersion":"2026-09-14T05:17:10.506Z"}