---
{
  title: 'Logs & Warnings',
  description: 'Logging and diagnostics conventions for NVIDIA Elements components: when to warn, when to error, and how runtime messages surface.',
  layout: 'docs.11ty.js'
}
---

# {{ title }}

This document describes the runtime logs and warnings from the Element libraries. These warnings help identify potential issues with component usage and implementation.

## Duplicate Package Version

This warning appears when the application bundles or imports many versions of Elements or its dependencies within the same runtime. This can create unexpected compatibility issues and bug at runtime. To resolve, ensure dependencies are up to date and list their dependencies or peer dependencies if they internally depend on Elements.

<nve-alert status="accent">Read more about [library packaging best practices](docs/api-design/packaging/).</nve-alert>

## Excessive Instance Limit

This warning appears when the DOM contains too many instances of a component. This can impact application performance. Common components that can have an excessive amount of instances include `nve-grid-row/cell` and `nve-tree-item`.

To resolve this warning:

- Consider reusing existing elements instead of creating new ones
- Use virtualization or pagination of elements
- [Data Grid Performance Documentation](docs/elements/data-grid/performance/)
- [Dynamic Tree Documentation](docs/elements/tree/#dynamic-tree)

## Invalid Parent

This warning occurs when a consumer places a component as a child of an unsupported parent element. Example, a `nve-card-header` element can only appear as a direct child of `nve-card`.

<nve-alert status="success">Valid</nve-alert>

```html
<nve-card>
  <nve-card-header></nve-card-header>
</nve-card>
```

<nve-alert status="danger">Invalid</nve-alert>

```html
<div>
  <nve-card-header></nve-card-header>
</div>
```

To resolve this warning:

- Place the component directly under the correct parent element
- Review the component's API for parent element requirements

## Invalid Slotted Children

This warning appears when invalid elements are slotted into a component. Example `nve-tree` and `nve-tree` have direct child relationships.

<nve-alert status="success">Valid</nve-alert>

```html
<nve-tree>
  <nve-tree-node></nve-tree-node>
</nve-tree>

<nve-grid-row>
  <nve-grid-cell></nve-grid-cell>
</nve-grid-row>
```

<nve-alert status="danger">Invalid</nve-alert>

```html
<nve-tree>
  <div>
    <nve-tree-node></nve-tree-node>
  </div>
</nve-tree>

<nve-grid-row>
  <div>
    <nve-grid-cell></nve-grid-cell>
  </div>
</nve-grid-row>
```

To resolve this warning:

- Check the component's documentation for allowed slotted elements
- Place only supported elements in slots

## ID Match Not Found

This warning appears when a component tries to reference an element by ID that doesn't exist in the DOM. Example a popover with a button trigger.

<nve-alert status="success">Valid</nve-alert>

```html
<nve-button popovertarget="my-popover">show tooltip</nve-button>
<nve-tooltip id="my-popover">tooltip</nve-tooltip>
```

<nve-alert status="danger">Invalid</nve-alert>

```html
<nve-button popovertarget="my-popover">show tooltip</nve-button>
<nve-tooltip id="incorrect-id">tooltip</nve-tooltip>
```

To resolve this warning:

- Ensure the referenced element exists in the DOM
- Check that the ID uses the correct spelling
- Verify the element renders before the component references it

## Cross Shadow Root Anchor

Native CSS Anchor Positioning allows two elements to tether together via a unique identifier. This is commonly used for popover-like elements. But CSS Anchor Positioning only supports positioning two elements in the same render root. Examples of rendering across render roots include in different Shadow DOM Roots or popover top layer instances. The CSSWG tracks this behavior/compatibility issue at https://github.com/w3c/csswg-drafts/issues/9408.

Element popover positioning detects instances of cross Shadow Root anchoring attempts and falls back to a JavaScript based positioning system. This allows the popover to anchor correctly but at the cost of render reliability and performance when compared to native CSS Anchor Positioning.

## SSR Mismatch

This warning appears when there's a mismatch between server-side rendered content and client-side rendered content.

<nve-alert status="accent"><a href="https://lit.dev/docs/ssr/overview/" nve-text="link">https://lit.dev/docs/ssr/overview/</a></nve-alert>

To resolve this warning:

- Ensure consistent rendering between server and client
- Check for conditional rendering that might differ between environments
- Verify that all required data is available during server-side rendering
