NV Elements Catalog Starters Repo System Themes About Getting Started Changelog Metrics Support Accessibility Contributions Requests Migration Deprecations Integrations Installation MCP CLI Lint Angular Bundles Extensions Go Hugo Import Maps Lit NextJS Nuxt Preact React SolidJS Svelte TypeScript Vue Foundations Typography Iconography Themes Design Tokens Size & Space Objects Interactions Support Status Color Animation Fonts Layers Custom Layout Horizontal Vertical Grid Popovers i18n Visualization View Transitions Elements Accordion Alert Avatar Badge Breadcrumb Button Button Group Card Chat Message Checkbox Color Combobox Copy Button Datagrid Integrations Column Action Column Alignment Column Fixed Column width Container Card Display Settings Footer Heatmap Keynav Multi Select Pagination Panel Detail Panel Grid Performance Placeholder Row Action Row Groups Row Sort Scroll Height Single Select Stripe Date Datetime Dialog Divider Dot Drawer Dropdown Dropdown Group Dropzone File Forms Validation Actions Control Icon Icon Button Input Input Group Logo Menu Month Notification Page Page Header Page Loader Pagination Panel Progressive Filter Chip Progress Bar Progress Ring Password Preferences Input Pulse Radio Range Resize Handle Search Select Skeleton Sort Button Sparkline Star Rating Steps Switch Tabs Tag Textarea Time Toast Toggletip Toolbar Tooltip Tree Week Patterns Authentication Browse Dashboard Editor Empty States Heatmap Keyboard Shortcut Logging Media Onboarding Panel Responsive Search Subheader Trend Code Codeblock Monaco Input Diff Input Editor Diff Editor Problems Markdown Markdown CSS Utility Labs Responsive Layout Viewport Container Patterns Forms API Design Properties & Attributes Slots Registration CustomEvents Stateless Composition Styles Packaging Glossary Logs Internal Guidelines Agent Harness Documentation Examples TypeScript Testing Unit Testing Accessibility Testing Lighthouse Testing SSR Testing Visual Testing Troubleshooting Component Creation Internal Examples All Examples

Logs & Warnings

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.

Read more about library packaging best practices.

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:

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.

Valid

Invalid

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.

Valid

Invalid

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.

Valid

Invalid

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.

https://lit.dev/docs/ssr/overview/

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