---
url: /api/renderers/web-components/src.md
---
[pantoken-root](../../../index.md) / web-components

# web-components

## Compatibility

Target: Web Components. Current format: `Custom-element registration and button shadow output`. Tested environment: `Node 26.10.0 with happy-dom 20.14.5`. Real-browser rendering and interaction behavior are not verified.

[Full compatibility matrix](../../../../compatibility)

Alpha

`@pantoken/web-components` — framework-agnostic custom elements for Instructure UI.

[register](functions/register.md) (auto-invoked in the browser) defines the full `<instui-*>` element set into
any custom-element registry. Each element renders the matching `@pantoken/components` CSS into
its shadow root; tokens are inherited custom properties that pierce the shadow boundary — load
`@pantoken/css` to supply them.

For localized UI strings (calendar nav labels, date-input placeholder, drilldown Back text) pass
`locale`, `strings`, or `dir` options to [register](functions/register.md). The full Canvas-parity bundle set and
the [registerLocalized](functions/registerLocalized.md) helper are exported from this package as well.

The module is Node-safe: element classes are defined inside [register](functions/register.md), a no-op when there
is no DOM, so importing during SSR or a build never touches `HTMLElement`.

Registration and shadow output are environment-verified with Happy DOM; real-browser behavior is
not covered by that check.

## Interfaces

* [CommandEventish](interfaces/CommandEventish.md)
* [LocaleSet](interfaces/LocaleSet.md)
* [ElementRegistry](interfaces/ElementRegistry.md)
* [RegisterContext](interfaces/RegisterContext.md)
* [ElementDefinition](interfaces/ElementDefinition.md)
* [LocaleInfo](interfaces/LocaleInfo.md)
* [RegisterContextOptions](interfaces/RegisterContextOptions.md)
* [WebComponentStrings](interfaces/WebComponentStrings.md)
* [LocaleBundle](interfaces/LocaleBundle.md)

## Variables

* [alert](variables/alert.md)
* [avatar](variables/avatar.md)
* [badge](variables/badge.md)
* [button](variables/button.md)
* [calendar](variables/calendar.md)
* [contextView](variables/contextView.md)
* [dateInput](variables/dateInput.md)
* [dateTimeInput](variables/dateTimeInput.md)
* [drawerLayout](variables/drawerLayout.md)
* [drilldown](variables/drilldown.md)
* [iconButton](variables/iconButton.md)
* [icon](variables/icon.md)
* [img](variables/img.md)
* [inPlaceEdit](variables/inPlaceEdit.md)
* [DEFINITIONS](variables/DEFINITIONS.md)
* [metric](variables/metric.md)
* [modal](variables/modal.md)
* [pages](variables/pages.md)
* [pill](variables/pill.md)
* [popover](variables/popover.md)
* [progressCircle](variables/progressCircle.md)
* [progress](variables/progress.md)
* [rating](variables/rating.md)
* [sideNavBar](variables/sideNavBar.md)
* [spinner](variables/spinner.md)
* [tabs](variables/tabs.md)
* [tag](variables/tag.md)
* [toggleButton](variables/toggleButton.md)
* [tooltip](variables/tooltip.md)
* [tray](variables/tray.md)
* [treeBrowser](variables/treeBrowser.md)
* [truncate](variables/truncate.md)
* [ELEMENTS](variables/ELEMENTS.md)
* [NESTED_DEPS](variables/NESTED_DEPS.md)
* [ICON_ELEMENTS](variables/ICON_ELEMENTS.md)
* [LOCALES](variables/LOCALES.md)
* [DEFAULT_PREFIX](variables/DEFAULT_PREFIX.md)
* [ENGLISH_STRINGS](variables/ENGLISH_STRINGS.md)
* [ar](variables/ar.md)
* [ca](variables/ca.md)
* [cy](variables/cy.md)
* [da](variables/da.md)
* [de](variables/de.md)
* [el](variables/el.md)
* [enAU](variables/enAU.md)
* [enCA](variables/enCA.md)
* [enGB](variables/enGB.md)
* [en](variables/en.md)
* [es](variables/es.md)
* [fa](variables/fa.md)
* [fi](variables/fi.md)
* [frCA](variables/frCA.md)
* [fr](variables/fr.md)
* [ga](variables/ga.md)
* [he](variables/he.md)
* [hi](variables/hi.md)
* [ht](variables/ht.md)
* [hu](variables/hu.md)
* [hy](variables/hy.md)
* [id](variables/id.md)
* [is](variables/is.md)
* [it](variables/it.md)
* [ja](variables/ja.md)
* [ko](variables/ko.md)
* [mi](variables/mi.md)
* [ms](variables/ms.md)
* [nb](variables/nb.md)
* [nl](variables/nl.md)
* [nn](variables/nn.md)
* [pl](variables/pl.md)
* [ptBR](variables/ptBR.md)
* [pt](variables/pt.md)
* [ru](variables/ru.md)
* [se](variables/se.md)
* [sl](variables/sl.md)
* [sv](variables/sv.md)
* [th](variables/th.md)
* [tr](variables/tr.md)
* [uk](variables/uk.md)
* [vi](variables/vi.md)
* [zhHans](variables/zhHans.md)
* [zhHant](variables/zhHant.md)

## Functions

* [getDir](functions/getDir.md)
* [registerLocalized](functions/registerLocalized.md)
* [createLocaleSet](functions/createLocaleSet.md)
* [iconSvg](functions/iconSvg.md)
* [noopIconSvg](functions/noopIconSvg.md)
* [buildRegisterContext](functions/buildRegisterContext.md)
* [formatMessage](functions/formatMessage.md)
* [isolate](functions/isolate.md)
* [formatNumber](functions/formatNumber.md)
* [formatDate](functions/formatDate.md)
* [formatList](functions/formatList.md)
* [formatRelativeTime](functions/formatRelativeTime.md)
* [resolveFirstDay](functions/resolveFirstDay.md)
* [makeStrings](functions/makeStrings.md)
* [defineBundle](functions/defineBundle.md)
* [register](functions/register.md)