{"record":{"id":"8025f95674f4a7cc","repo":"emberjs/ember.js","slug":"cannot-create-a-tag-inside-an-svg-context","errorCode":null,"errorMessage":"Cannot create a ${tag} inside an SVG context","messagePattern":"Cannot create a (.+?) inside an SVG context","errorType":"exception","errorClass":"Error","httpStatus":null,"severity":"error","filePath":"packages/@glimmer/runtime/lib/dom/operations.ts","lineNumber":68,"sourceCode":"      isElementInMathMlNamespace: boolean,\n      ns: Namespace;\n\n    if (context) {\n      isElementInSVGNamespace = context.namespaceURI === NS_SVG || tag === 'svg';\n      isElementInMathMlNamespace = context.namespaceURI === NS_MATHML || tag === 'math';\n      isHTMLIntegrationPoint = !!(SVG_INTEGRATION_POINTS as Dict<number>)[context.tagName];\n    } else {\n      isElementInSVGNamespace = tag === 'svg';\n      isElementInMathMlNamespace = tag === 'math';\n      isHTMLIntegrationPoint = false;\n    }\n\n    if ((isElementInMathMlNamespace || isElementInSVGNamespace) && !isHTMLIntegrationPoint) {\n      // FIXME: This does not properly handle <font> with color, face, or\n      // size attributes, which is also disallowed by the spec. We should fix\n      // this.\n      if (BLACKLIST_TABLE[tag]) {\n        throw new Error(`Cannot create a ${tag} inside an SVG context`);\n      }\n      if (isElementInMathMlNamespace) {\n        ns = NS_MATHML;\n      } else {\n        ns = NS_SVG;\n      }\n\n      return this.document.createElementNS(ns, tag);\n    } else {\n      return this.document.createElement(tag);\n    }\n  }\n\n  insertBefore(parent: SimpleElement, node: SimpleNode, reference: Nullable<SimpleNode>) {\n    parent.insertBefore(node, reference);\n  }\n\n  insertHTMLBefore(parent: SimpleElement, nextSibling: Nullable<SimpleNode>, html: string): Bounds {","sourceCodeStart":50,"sourceCodeEnd":86,"githubUrl":"https://github.com/emberjs/ember.js/blob/26f97246a8bf2e28edf26ac3093da2e86c04ffc5/packages/@glimmer/runtime/lib/dom/operations.ts#L50-L86","documentation":"When creating an element inside an SVG or MathML context, the HTML parser spec forbids certain HTML-only tags (the BLACKLIST_TABLE, e.g. <div>, <p>, <input>). Glimmer's createElement enforces this and throws instead of producing invalid DOM. It exists to prevent malformed trees when Glimmer renders an element that cannot legally be a child of an SVG/MathML subtree.","triggerScenarios":"Calling createElement(tag) while the current insertion point is inside an <svg> or <math> subtree (not an HTML integration point like <foreignObject>) and tag is in the blacklist table (e.g. div, span, input, p).","commonSituations":"Templates that put HTML tags inside an <svg> element (outside foreignObject); dynamic tag names ({{#let (someTag)}}<this.tag>) resolving to an HTML tag under SVG; programmatic DOM building with DOMTreeConstruction into SVG nodes.","solutions":["Move the HTML element out of the SVG/MathML subtree in the template","Wrap HTML content inside <foreignObject> within the SVG, which is an HTML integration point","If the tag is dynamic, guard it so an HTML tag is never used in SVG context","Fix the SVG markup so the offending element is a valid SVG child (e.g. use SVG equivalents like <text> instead of <div>)"],"exampleFix":"// before\n<svg><div>hi</div></svg>\n// after\n<svg><foreignObject><div>hi</div></foreignObject></svg>","handlingStrategy":"validation","validationCode":"const SVG_BLACKLIST = new Set(['div','p','span','input','table','ul','li','h1','h2','h3','button','form']);\nif (inSvgContext && SVG_BLACKLIST.has(tag)) {\n  throw new Error(`Tag <${tag}> cannot be created inside an SVG context`);\n}","typeGuard":"function isSvgSafeTag(tag: string, inSvgContext: boolean): boolean {\n  return !inSvgContext || !SVG_BLACKLIST.has(tag);\n}","tryCatchPattern":null,"preventionTips":["Never nest HTML tags directly under <svg>; use <foreignObject> for HTML content","Validate dynamic tag names against the intended namespace before rendering","Learn the HTML integration points (foreignObject, desc, title) that allow HTML inside SVG","Keep SVG content to SVG-namespace elements (text, rect, path, etc.)"],"tags":["dom","svg","glimmer"],"backgroundTag":"invalid-dom-structure","analyzedSha":"26f97246a8bf2e28edf26ac3093da2e86c04ffc5","analyzedAt":"2026-09-01T05:01:28.182Z","contentChangedAt":null,"schemaVersion":2},"datasetVersion":"2026-09-08T10:18:20.063Z"}