GLUON / DOCS Playground

@gluonjs/core

@gluonjs/core / src/styles / StyleSheetOwner

Interface: StyleSheetOwner

Properties

disposed

readonly disposed: boolean

sheets

readonly sheets: readonly CSSStyleSheet[]

target

readonly target: StyleTarget

Methods

dispose()

dispose(): void

Returns

void

release()

release(...sheets): void

Parameters

sheets

...readonly CSSStyleSheet[]

Returns

void

retain()

retain(...sheets): void

Parameters

sheets

...readonly CSSStyleSheet[]

Returns

void

Example

Own a target-specific set of retained constructed sheets with explicit release and idempotent disposal:

ts
import {
  createStyleSheetOwner,
  createStyleSheetSelection,
  css,
  getStyleSheetDigest,
  getStyleTextDigest,
  replaceStyleSheet,
  type StyleSheetOwner,
  type StyleSheetSelection,
  type StyleSheetSelectionEntry,
} from '@gluonjs/core';

const sheet = css`:root { --shop-accent: blue; }`;
const entry = { id: 'shop-theme', scope: 'shop', sheet } satisfies StyleSheetSelectionEntry;
const selection: StyleSheetSelection = createStyleSheetSelection([entry]);
const owner: StyleSheetOwner = createStyleSheetOwner(document);
owner.retain(sheet);
replaceStyleSheet(sheet, ':root { --shop-accent: green; }');
console.log(selection.entries[0]?.id, getStyleSheetDigest(sheet), getStyleTextDigest('shop'));
owner.release(sheet);
owner.dispose();