A target inside a shadow root

A button no selector can reach, named with a function, and pressed through the hole like any other.

The story

/** The component on the page, or `null` before it is mounted. */
const component = (): SendButton | null => document.querySelector<SendButton>(SEND)

const story = {
  id: 'inside-shadow-dom',
  steps: [
    {
      id: 'total',
      target: '[data-total]',
      message: 'An ordinary target, named by a selector. Press Next.',
    },
    {
      id: 'send',
      // The whole case. `document.querySelector('button')` finds nothing
      // here, and neither would any other string: the element is behind a
      // boundary only its host can cross.
      target: { elements: () => component()?.button ?? null, interactive: true },
      message:
        'This button lives inside a shadow root. The step names it with a ' +
        'function, because there is no selector that reaches it. Press it ' +
        'through the hole — the boundary changes nothing about the cutout, ' +
        'and nothing about where this box sits either.',
    },
  ],
} satisfies LekoStory