GLUON / DOCS Playground

@gluonjs/core

@gluonjs/core / src/styles / layerOrderStyles

Variable: layerOrderStyles

const layerOrderStyles: CSSStyleSheet

Example

Establish the public Gluon, Quark, Atom, Molecule, and Organism cascade order before component styles are adopted:

ts
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();