Intelligence Community Design System

Typically, components sit in the DOM, also known as the 'light DOM' . DOM stands for 'Document Object Model'. The light DOM represents the structure of a webpage as a tree, where each DOM object is a node.

At the core, the UI Kit components are based off the web components specification, which utilises the shadow DOM. This makes it possible to encapsulate each component’s markup structure, styling and functionality.

According to Mozilla , the "shadow DOM allows hidden DOM trees to be attached to elements in the regular DOM tree — this shadow DOM tree starts with a shadow root, underneath which you can attach any element, in the same way as the normal DOM."

Therefore, testing components within the shadow DOM can be problematic because elements inside a shadow root technically do not exist in the main DOM, and can prevent testing frameworks from selecting internal elements.

To ease the process of testing, here are guides to testing our UI Kit components in different testing frameworks.