Outlet Selectors

Updated:

How to identify outlet contexts so platform theme CSS can target extensions by where they render.

The outlet-selector attribute identifies the outlet context an extension is rendered in, so the platform theme stylesheet — which Tecton injects into each extension iframe — can scope rules by outlet.

Requires UUX 4.7.1.5+ and Tecton 1.67.0+.

When a platform sets outlet-selector="..." on an outlet element, Tecton forwards the value into the extension iframe and sets it as data-outlet-selector on the extension's <body>. Theme CSS can then target extensions by outlet using a standard attribute selector:

body[data-outlet-selector="account-detail-tabs"] {
  /* styles only applied to extensions rendered in this outlet */
}

Setting outlet-selector on Outlets

All three outlet types accept the attribute. For example:

Platform Outlet

<tecton-platform-outlet
  name="myFeature"
  context="None"
  outlet-selector="tecton-route"
></tecton-platform-outlet>

Feature Outlet

<tecton-outlet
  name="myFeature"
  context="None"
  outlet-selector="landing-page-banner"
></tecton-outlet>

Tabbed Outlet

<tecton-tabbed-outlet
  name="AccountDetails.main.tabs"
  context="Account::Q2Account"
  contextValue="{{accountId}}"
  outlet-selector="account-detail-tabs"
></tecton-tabbed-outlet>

Targeting Extensions with Theme CSS

The data attribute lives on the extension iframe's <body>, which means theme CSS injected into the iframe can target it with a single attribute selector. This composes cleanly with the existing --tct-* override variables documented in Styling Components:

/* Tighter padding on buttons in the overpanel context */
body[data-outlet-selector="tecton-overpanel"] {
  --tct-btn-padding: 4px 8px;
}

/* Custom card border for extensions in account detail tabs */
body[data-outlet-selector="account-detail-tabs"] q2-card {
  --tct-card-border: 2px solid var(--t-primary);
}

Because the attribute is set on the body element inside each iframe, the rules only apply within that iframe — there's no risk of leaking styles across outlets or back into the host page.

Targeting Outlets from Extension CSS

The same data-outlet-selector attribute is on your extension's <body>, so your extension can use it from its own stylesheets too:

/* Tighter layout when this extension renders inside an overpanel */
body[data-outlet-selector="tecton-overpanel"] .my-form {
  padding: 8px;
}

/* Default layout for all other contexts */
.my-form {
  padding: 16px;
}

For the exact selector values UUX sets on its outlets, see the UUX Reference appendix below.

If you'd rather branch on outlet context in JavaScript than in CSS, the resolved value is also returned from connect() as tecton.outletSelector:

import { connect } from 'q2-tecton-sdk';

const tecton = await connect();

if (tecton.outletSelector === 'tecton-overpanel') {
  // ...
}

Placing outlet-scoped styles in UUX

UUX delivers a props-scoped subset of its theme stylesheet to extension iframes, not the full theme. Outlet-scoped rules must live inside that subset to take effect.

The extracted range is bracketed by /* === BEGIN PROPS === */ and /* === END PROPS === */ comment lines in packages/q2-uux/app/styles/theme/partials/_themevars.scss. Add outlet-scoped rules either between those markers directly, or in packages/q2-uux/app/styles/theme/tecton/_theme-properties.scss, which is imported within the range and is the conventional home for --tct-* declarations.

Rules placed outside this range will compile into the platform's full theme CSS and apply to the host UUX app, but will not reach extension iframes.

UUX Reference

The values below are specific to UUX, the reference platform that consumes Tecton. Other platforms are free to choose their own vocabulary; this section exists as a concrete reference for extension authors targeting UUX.
Selector Outlet type Where it renders
tecton-route platform-outlet Main Tecton route pages (auth and main app)
tecton-mfa platform-outlet External MFA module
tecton-overpanel platform-outlet Overpanels
account-detail-header platform-outlet (widget host) Account page header widget region
account-detail-middle platform-outlet (widget host) Account page middle widget region
account-detail-tabs tabbed-outlet Account detail tabs
recipient-details tabbed-outlet Activity Center recipient details card
activity-center-tabs tabbed-outlet Activity Center main page
transaction-details-tabs tabbed-outlet Transaction history details
content-block-grid platform-outlet Composable Dashboard grid layout
content-block-full-width platform-outlet Composable Dashboard full-width layout
content-block-frameless platform-outlet Composable Dashboard frameless layout
sdk-content-block platform-outlet SDK content block
policies-display platform-outlet Policies display
landing-page-top-banner feature-outlet Accounts landing page banner
commercial-subsidiaries platform-outlet Commercial subsidiaries page
commercial-subsidiary platform-outlet Commercial subsidiary detail page
etms-ars-report platform-outlet ETMS ARS report page
user-record-etms platform-outlet User record ETMS section
user-records-etms platform-outlet User records list ETMS section