diff --git a/src/Components/Web.JS/src/Rendering/LogicalElements.ts b/src/Components/Web.JS/src/Rendering/LogicalElements.ts index d963499c5a75..4059a05488bd 100644 --- a/src/Components/Web.JS/src/Rendering/LogicalElements.ts +++ b/src/Components/Web.JS/src/Rendering/LogicalElements.ts @@ -1,7 +1,7 @@ // Licensed to the .NET Foundation under one or more agreements. // The .NET Foundation licenses this file to you under the MIT license. -import { ComponentDescriptor } from '../Services/ComponentDescriptorDiscovery'; +import { ComponentDescriptor, isMetadataComment } from '../Services/ComponentDescriptorDiscovery'; /* A LogicalElement plays the same role as an Element instance from the point of view of the @@ -109,6 +109,12 @@ export function toLogicalElement(element: Node, allowExistingContents?: boolean) } element.childNodes.forEach(child => { + // Skip metadata comments that will be consumed during discovery + // These are not components and should not be part of the logical tree + if (isMetadataComment(child)) { + return; + } + const childLogicalElement = toLogicalElement(child, /* allowExistingContents */ true); childLogicalElement[logicalParentPropname] = element; childrenArray.push(childLogicalElement); diff --git a/src/Components/Web.JS/src/Services/ComponentDescriptorDiscovery.ts b/src/Components/Web.JS/src/Services/ComponentDescriptorDiscovery.ts index 4fb4e39d8fc2..7f478665c3eb 100644 --- a/src/Components/Web.JS/src/Services/ComponentDescriptorDiscovery.ts +++ b/src/Components/Web.JS/src/Services/ComponentDescriptorDiscovery.ts @@ -1,6 +1,19 @@ // Licensed to the .NET Foundation under one or more agreements. // The .NET Foundation licenses this file to you under the MIT license. +// Metadata comments are consumed during discovery and should not be part of the logical tree. +// They include: WebAssembly options, component state, and web initializers. +export function isMetadataComment(node: Node): boolean { + if (node.nodeType !== Node.COMMENT_NODE) { + return false; + } + const content = node.textContent || ''; + return content.trim().startsWith('Blazor-Server-Component-State:') || + content.trim().startsWith('Blazor-WebAssembly-Component-State:') || + content.trim().startsWith('Blazor-Web-Initializers:') || + content.trim().startsWith('Blazor-WebAssembly:'); +} + export function discoverComponents(root: Node, type: 'webassembly' | 'server' | 'auto'): ComponentDescriptor[] { switch (type) { case 'webassembly':