HTML Slots

<rapi-doc> renders inside a Shadow DOM, so you can’t insert elements into it directly. Instead it has slots: named places where your own HTML appears. Put an element inside <rapi-doc> and give it a slot attribute naming the place; children without a slot go to the default slot. Slotted elements stay in your page’s DOM, so your page’s CSS styles them.

<rapi-doc spec-url="https://petstore.swagger.io/v2/swagger.json" show-header="true">
  <img slot="logo" src="/brand/logo.svg" alt="Acme" height="28" />

  <a slot="header" href="https://github.com/acme/api">GitHub</a>

  <div class="banner">Welcome to the Acme API v2.4. Read the new authentication guide.</div>

  <p slot="auth">Need a key? Create one in the <a href="https://console.acme.com">developer console</a>.</p>

  <footer slot="footer">© 2026 Acme Corp. <a href="/terms">Terms</a></footer>
</rapi-doc>

Slot reference

Slot	Where it appears
(default)	Top of the main content, above the overview. Also shown while the spec is loading.
`fixed-header`	Pinned at the top of the element; doesn’t scroll away.
`logo`	The header, replacing the RapiDoc logo. Needs `show-header="true"`.
`header`	The end of the header. Needs `show-header="true"`.
`nav-logo`	Top of the sidebar, in `read` and `focused` modes.
`overview`	The overview section, after the title, version and contact lines and before the description.
`servers`	The API Servers section.
`auth`	The end of the Authentication section, below the security schemes.
`operations-top`	Above the list of operations.
`footer`	The bottom of the main content.
`tag--<tag id>`	Under a tag’s heading, above its description. `read` and `view` modes.
`<operation id>`	Inside one operation. `read` and `view` modes.

Tag and operation slots

Tag and operation slots are named after the element IDs RapiDoc gives them, so they follow the same rules as links (see Links & Navigation):

Tags: tag-- and the tag name in lowercase kebab-case. The tag Pet is tag--pet; User Management is tag--user-management.
Operations: the operationId in kebab-case (getPetById is get-pet-by-id); without one, the summary or the method and path.

<rapi-doc spec-url="https://petstore.swagger.io/v2/swagger.json">
  <div slot="tag--pet">Pet IDs are 64-bit integers.</div>
  <div slot="get-pet-by-id">Responses from this endpoint are cached for 60 seconds.</div>
</rapi-doc>

When the spec uses x-tagGroups, an operation’s ID starts with its tag (pet--get-pet-by-id). If a slot doesn’t show up, find the ID in the page’s address bar after clicking the operation, or in the browser’s element inspector.