Styling, themes, and responsive layouts
Design CSS controls structure; themes supply brand values. The host places design styles before the resolved theme stylesheet inside the CMP's Shadow DOM, so matching theme declarations win at equal specificity. Host-page selectors do not automatically reach those elements. Keep reusable values in themes or vars.css, and layout rules in styles.css.
Notice-only styles
.brand-notice {
max-inline-size: min(42rem, calc(100vw - 2rem));
}
.brand-notice .brand-actions {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
}
@media (max-width: 40rem) {
.brand-notice .brand-actions > button { flex: 1 1 100%; }
}Add brand-notice only to the notice. In custom banner mode, official secondary components and styles are compiled separately. The host replaces the active view stylesheet on navigation while retaining theme CSS. In a full design, common selectors and shared partials can affect all authored views. Preview the complete consent experience.
Host attributes
Use :host(...) for attributes on the outer CMP host:
:host([data-1c-theme="dark"]) .brand-notice {
border-color: var(--oc-color-primary);
}
:host([data-1c-layer="notice"][data-1c-spacing="compact"]) .brand-notice {
padding: 1rem;
}Mirrored attributes include data-1c-state (open/closed), data-1c-load, data-1c-theme (light/dark), data-1c-layer (notice/details/trigger), data-1c-framework (gdpr/tcf/us), data-1c-position, and data-1c-spacing. Layer attributes change during navigation; position/spacing follow appearance configuration.
Tokens and inheritance
Use supplied --oc-* tokens, for example var(--oc-color-primary). Check actual theme output for available names. Define custom namespaced variables in vars.css when necessary. A local file with the same name replaces a collection default; it is not automatically concatenated with that inherited file.
Scrollable preferences
.brand-preferences {
display: flex;
flex-direction: column;
max-block-size: calc(100dvh - 2rem);
}
.brand-preferences__content { min-block-size: 0; overflow-y: auto; }
.brand-preferences__actions { flex-shrink: 0; }Apply classes to the existing panel, scroll region, and action region. Preserve modal structure. Test narrow/short viewports, zoom, and long translations. Keep required choices, disclosures, and Save/Cancel reachable.
Accessibility
Retain dialog names, native input labels, visible focus, readable contrast, and reading order. The host manages modal focus and scroll behavior for supported views; test after restructuring. Account for RTL and reduced motion where used. Do not hide choices to solve a layout problem.