Component Utility Functions API reference for helper functions in the Semantic UI Component system tool Guide

Component Utility Functions

@semantic-ui/component includes a few additional helpers in its exports which are used internally and may prove useful for some advanced use cases.

Import

import { adoptStylesheet, scopeStyles, extractCSS } from '@semantic-ui/component';

Styles

adoptStylesheet

adoptStylesheet(css, adoptedElement, options)

Adopts a stylesheet into an element’s adoptedStyleSheets. Each stylesheet is only added once, tracked by a hash of its content.

Parameters

NameTypeRequiredDescription
cssstringYesCSS to be adopted
adoptedElementElementNoElement to adopt styles into. Defaults to document
optionsObjectNoConfiguration options

Options Object

NameTypeDefaultDescription
scopeSelectorstringundefinedSelector to scope styles to

Example

// Add to document
adoptStylesheet(`
  .ui.button {
    padding: 0.5em 1em;
  }
`);


// Add to specific element with scoping
adoptStylesheet(
  '.button { color: blue; }',
  myElement,
  { scopeSelector: '.my-component' }
);

scopeStyles

scopeStyles(css, scopeSelector)

Scopes CSS rules to a specific selector, handling various CSS rule types including media queries, supports rules, and layer statements.

Parameters

NameTypeRequiredDescription
cssstringYesCSS content to be scoped
scopeSelectorstringYesSelector to scope styles to

Returns

The scoped CSS string.

Example

const css = `
  .button { color: blue; }
  @media (max-width: 768px) {
    .button { padding: 0.5em; }
  }
  @layer theme {
    .button { background: var(--primary); }
  }
`;


const scopedCSS = scopeStyles(css, '.ui-button');

extractCSS

extractCSS(tagName)

Extracts all CSS rules that match a specific tag name from document stylesheets. Creates a new stylesheet containing only matching rules.

Parameters

NameTypeRequiredDescription
tagNamestringYesTag name to extract CSS for

Returns

A new CSSStyleSheet containing matching rules.

Example

// Extract all styles for ui-button
const buttonStyles = extractCSS('ui-button');

Properties

adjustPropertyFromAttribute

adjustPropertyFromAttribute({ el, attribute, attributeValue, properties, componentSpec })

Synchronizes component properties when attributes change, handling Semantic UI’s attribute dialects and spec-based property mapping.

Parameters

NameTypeRequiredDescription
elElementYesWeb component element instance
attributestringYesAttribute name that changed
attributeValueanyYesNew value of the attribute
propertiesObjectNoComponent property definitions
componentSpecObjectNoComponent specification object

Example

// With component spec
adjustPropertyFromAttribute({
  el: buttonElement,
  attribute: 'size',
  attributeValue: 'large',
  componentSpec: ButtonComponentSpec
});


// With property definitions
adjustPropertyFromAttribute({
  el: customElement,
  attribute: 'icon-after',
  attributeValue: true,
  properties: {
    iconAfter: { type: Boolean },
    'icon-after': { type: Boolean, alias: true }
  }
});