Interface: ComponentStyleOwner

import {
  LegacyComponentStyleConflictError,
  compareComponentStyles,
  createComponentStyleDependency,
  createComponentStyleOwner,
  createComponentStyleSelection,
  css,
  html,
  markLegacyComponentStyleSheet,
  releaseRenderStyles,
  render,
  type ComponentStyleDependency,
  type ComponentStyleLayer,
  type ComponentStyleOwner,
} from '@gluonjs/core';

const layer: ComponentStyleLayer = 'atom';
const dependency: ComponentStyleDependency = createComponentStyleDependency({
  id: 'shop-add-button', sheet: css`@layer atoms { .add { min-height: 44px; } }`, layer, order: 0, scope: 'gluon-component',
});
const root = document.querySelector<HTMLElement>('#app')!;
const value = html`<button class="add">Add to bag</button>`.withStyleDependencies([dependency]);
const selection = createComponentStyleSelection(value);
const owner: ComponentStyleOwner = createComponentStyleOwner(document);
owner.retain(dependency);
render(value, root);
releaseRenderStyles(root);
owner.release(dependency);
owner.dispose();

const legacy = markLegacyComponentStyleSheet(css`.add { min-height: 44px; }`, [dependency.id]);
const diagnostic = new LegacyComponentStyleConflictError(dependency.id);
console.log(selection.entries, compareComponentStyles(dependency, dependency), legacy, diagnostic.code);