{"record":{"id":"cf38d11bfac0bb0f","repo":"dotnet/aspnetcore","slug":"could-not-find-any-element-matching-selector-el","errorCode":null,"errorMessage":"Could not find any element matching selector '${elementSelector}'.","messagePattern":"Could not find any element matching selector '(.+?)'\\.","errorType":"exception","errorClass":null,"httpStatus":null,"severity":"error","filePath":"src/Components/Web.JS/src/Rendering/Renderer.ts","lineNumber":49,"sourceCode":"  browserRenderer.attachRootComponentToLogicalElement(componentId, logicalElement, appendContent);\n}\n\nexport function attachRootComponentToElement(elementSelector: string, componentId: number, browserRendererId: number): void {\n  const afterElementSelector = '::after';\n  const beforeElementSelector = '::before';\n  let appendContent = false;\n\n  if (elementSelector.endsWith(afterElementSelector)) {\n    elementSelector = elementSelector.slice(0, -afterElementSelector.length);\n    appendContent = true;\n  } else if (elementSelector.endsWith(beforeElementSelector)) {\n    throw new Error(`The '${beforeElementSelector}' selector is not supported.`);\n  }\n\n  const element = getAndRemovePendingRootComponentContainer(elementSelector)\n    || document.querySelector(elementSelector);\n  if (!element) {\n    throw new Error(`Could not find any element matching selector '${elementSelector}'.`);\n  }\n\n  // 'allowExistingContents' to keep any prerendered content until we do the first client-side render\n  // Only client-side Blazor supplies a browser renderer ID\n  attachRootComponentToLogicalElement(browserRendererId, toLogicalElement(element, /* allow existing contents */ true), componentId, appendContent);\n}\n\nexport function getRendererer(browserRendererId: number): BrowserRenderer | undefined {\n  return browserRenderers[browserRendererId];\n}\n\nexport function renderBatch(browserRendererId: number, batch: RenderBatch): void {\n  const browserRenderer = browserRenderers[browserRendererId];\n  if (!browserRenderer) {\n    throw new Error(`There is no browser renderer with ID ${browserRendererId}.`);\n  }\n\n  const arrayRangeReader = batch.arrayRangeReader;","sourceCodeStart":31,"sourceCodeEnd":67,"githubUrl":"https://github.com/dotnet/aspnetcore/blob/3600ca084e9c8b5f4174fc5e747f4c52d2100806/src/Components/Web.JS/src/Rendering/Renderer.ts#L31-L67","documentation":"Thrown by attachRootComponentToElement when neither getAndRemovePendingRootComponentContainer nor document.querySelector returns an element for the given selector. This means no DOM node matches the root component selector supplied by the .NET side. The framework cannot attach a root component to a missing element.","triggerScenarios":"The selector in Components.Add or app.RootComponents.Add does not match any element in the prerendered/initial HTML; the element is rendered after Blazor tries to attach; selector typo; using an id selector when the element has a class.","commonSituations":"Layout changed and the #app or #host id was renamed; SSR/prerender pipeline changed and the placeholder element is gone; SPA shell page missing the expected div; timing issue where the element is injected by another script after Blazor's attach.","solutions":["Verify the element exists in the host HTML at attach time using DevTools (document.querySelector('#yourselector')).","Correct the selector string in your .NET RootComponents configuration to match the actual element id/class.","Ensure the host page (index.html/_Host.cshtml/App.razor) contains the element.","If the element is added dynamically, defer Blazor start until after it is in the DOM.","Use a unique id and double-check spelling and the '#' / '.' prefix."],"exampleFix":"// before\nbuilder.RootComponents.Add<MyApp>('#appp'); // typo\n\n// after\nbuilder.RootComponents.Add<MyApp>('#app');\n<!-- index.html -->\n<div id=\"app\">Loading...</div>","handlingStrategy":"validation","validationCode":"const el = document.querySelector(selector);\nif (!el) {\n  throw new Error(`No element matches '${selector}'. Fix the selector or host HTML.`);\n}\n// proceed with attach","typeGuard":null,"tryCatchPattern":"try {\n  attachRootComponentToElement(selector, componentId, browserRendererId);\n} catch (e) {\n  if (/Could not find any element/.test(String(e?.message))) {\n    // wait for the element then retry, or surface a clear config error\n  } else { throw e; }\n}","preventionTips":["Verify the host HTML contains the target element with the exact id/class.","Keep selector constants in one place to avoid typos.","If the element is injected dynamically, await its presence before starting Blazor."],"tags":["blazor","rendering","selector","dom","startup"],"backgroundTag":null,"analyzedSha":"3600ca084e9c8b5f4174fc5e747f4c52d2100806","analyzedAt":"2026-08-11T16:32:30.678Z","contentChangedAt":null,"schemaVersion":2},"datasetVersion":"2026-09-23T08:17:48.524Z"}