Outlet Selectors

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.

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 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