Skip to content

The suggestion list shares the prompt's shadow root ​

jolly-console is split along its concerns. The scrollback is its own element, jolly-console-log, with its own shadow root and styles. The suggestion list and the keyboard are reactive controllers, SuggestionController and KeyboardController, whose templates render into the jolly-console shadow root.

The list cannot be a child element with a shadow root. The prompt is a combobox that points at the list with aria-controls and at the highlighted option with aria-activedescendant. Both are IDREFs, and an IDREF does not resolve across a shadow boundary, so screen readers would lose the highlighted option. The scrollback has no such reference and can be encapsulated.

Considered Options ​

  • A list element without a shadow root (createRenderRoot() returning the host). The IDREFs would resolve, but the element would depend on styles from its parent, which is a component in name only.
  • Element reflection (ariaActiveDescendantElement). It crosses shadow roots, but browser support is not complete enough to rely on for the one assistive path the combobox has.

Consequences ​

List styles stay in Console.styles.ts. Controllers are tested under node --test with a stub host; rendering, focus and scrolling are covered by the Playwright suite.