@gluonjs/core / src/styles / adoptStyles

Function: adoptStyles()

adoptStyles(target, ...sheets): void

Adds sheets to a Document or ShadowRoot once, preserving existing sheets.

Parameters

target

StyleTarget

sheets

...readonly CSSStyleSheet[]

Returns

void

Example

Adopt one constructable stylesheet into a Document or ShadowRoot once while preserving unrelated sheets:

import {
  adoptStyles,
  createStyleSheet,
  css,
  foundationStyles,
  getStyleSheetText,
  installGluonStyles,
  layerOrderStyles,
  unadoptStyles,
  type CssValue,
  type StyleTarget,
} from '@gluonjs/core/styles';

const accent: CssValue = '#3157ff';
const productStyles = css`
  :host { display: block; border-color: ${accent}; }
`;
const extra = createStyleSheet(':host { contain: content; }');
const target: StyleTarget = document.createElement('article').attachShadow({ mode: 'open' });
const removeFoundation = installGluonStyles(target);
adoptStyles(target, productStyles, extra);
console.log(target.adoptedStyleSheets.includes(productStyles), getStyleSheetText(productStyles), layerOrderStyles, foundationStyles);
unadoptStyles(target, productStyles, extra);
removeFoundation();