Web Component Base

WebComponentBase is the base web component class used to create web components with defineComponent. It handles internal utilities related to component lifecycle and other internals of the framework.

Advanced Use Only - It is not recommended to use this base class directly except in use cases where you want to create custom web components without defineComponent

Import

import { WebComponentBase } from '@semantic-ui/component';

Static Properties

Instance Properties

Static Methods

getProperties

static getProperties({ properties, settings, componentSpec })

Defines property configurations for a web component.

Parameters

Returns

An object containing the configured properties.

Example

const properties = WebComponentBase.getProperties({
  properties: {
    value: String,
  },
  settings: {
    theme: 'light'
  },
  componentSpec: mySpec
});

getPropertySettings

static getPropertySettings(propertyName, type = String, { propertyOnly = false } = {})

Creates property configuration for a single property.

Parameters

Options Object

Returns

Property configuration object.

Example

const propConfig = WebComponentBase.getPropertySettings(
  'theme',
  String,
  { propertyOnly: false }
);

Instance Methods

addRenderCallback

addRenderCallback(callback)

Adds a callback to be executed after rendering.

Parameters

Example

this.addRenderCallback(() => {
  console.log('Render complete');
});

setDefaultSettings

setDefaultSettings({settings, componentSpec})

Sets default settings for a component.

Parameters

Example

this.setDefaultSettings({
  settings: {
    theme: 'light',
    size: 'medium'
  },
  componentSpec: mySpec
});

getSettingsFromConfig

getSettingsFromConfig({componentSpec, properties})

Returns current settings including both attributes and properties.

Parameters

Returns

Current settings object.

Example

const settings = this.getSettingsFromConfig({
  componentSpec: mySpec,
  properties: this.constructor.properties
});

createSettingsProxy

createSettingsProxy({componentSpec, properties})

Creates a proxy object for reactive settings access.

Parameters

Returns

A Proxy object for reactive settings.

Example

this.settings = this.createSettingsProxy({
  componentSpec,
  properties: this.constructor.properties
});

getUIClasses

getUIClasses({componentSpec, properties})

Generates CSS classes based on component attributes.

Parameters

Returns

A string of space-separated CSS classes.

Example

const classes = this.getUIClasses({
  componentSpec,
  properties: this.constructor.properties
});

getContent

getContent({componentSpec})

Retrieves slotted content from a component.

Parameters

Returns

An object containing slotted content.

Example

const content = this.getContent({
  componentSpec: mySpec
});

isDarkMode

isDarkMode()

Checks if the component is in dark mode.

Returns

Boolean indicating if dark mode is active, or undefined if server-side.

Example

if (this.isDarkMode()) {
  this.theme = 'dark';
}

$(selector, options)

$(selector, { root } = {})

Queries the component’s render root.

Parameters

Options Object

Returns

Query result set.

Example

const buttons = this.$('button');

$$(selector)

$$(selector)

Queries the original DOM content.

Parameters

Returns

Query result set.

Example

const content = this.$$('.content');

call

call(func, { firstArg, additionalArgs, args } = {})

Calls a function with standard parameters.

Parameters

Options Object

Example

this.call(callback, {
  firstArg: 'value',
  additionalArgs: ['extra'],
  args: [this.component, this.$]
});