Web Component Base

The WebComponentBase class is a core part of the Semantic UI Component system. It extends the base LitElement class and provides additional functionality useful for Semantic UI components, including support for light DOM rendering, reactive state management, and enhanced event handling.

Import

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

Class: WebComponentBase

WebComponentBase extends LitElement and serves as the foundation for Semantic UI web components.

Static Properties

Instance Properties

Methods

constructor()

Creates a new instance of the WebComponentBase class.

updated()

Lifecycle method called after the component updates. Handles slotting of light DOM content if necessary.

addRenderCallback(callback)

Adds a callback to be executed after rendering.

addPageCSS(webComponent, id, css, options)

Adds scoped CSS to the page for light DOM rendering.

storeOriginalContent()

Stores the original content of the element for use with light DOM rendering.

slotLightContent()

Handles the slotting of light DOM content.

watchSlottedContent(settings)

Sets up observers for slotted content changes.

onSlotChange(slotEl, settings)

Handles changes to slotted content.

getSettings(options)

Retrieves the current settings of the component.

setSetting(name, value)

Sets a specific setting on the component.

createSettingsProxy(options)

Creates a proxy object for reactive access to component settings.

getUIClasses(options)

Generates CSS classes based on the component’s current state and attributes.

getContent(options)

Retrieves the content (slotted or attribute-based) of the component.

isDarkMode()

Checks if the component is in dark mode.

$(selector, options)

Queries the component’s render root for elements matching the selector.

$$(selector)

Queries the original DOM content of the component.

call(func, options)

Calls a function with consistent parameters and context.

Example

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

class MyCustomElement extends WebComponentBase {
  static properties = {
    myProp: { type: String }
  };

  constructor() {
    super();
    this.myProp = 'Initial Value';
  }

  render() {
    return html`
      <div>My Custom Element: ${this.myProp}</div>
    `;
  }
}

customElements.define('my-custom-element', MyCustomElement);

Notes

• WebComponentBase provides a robust foundation for creating Semantic UI components, handling many common tasks and providing useful utilities.
• The class supports both shadow DOM and light DOM rendering, allowing for flexibility in component implementation.
• Built-in support for reactive settings and UI class generation helps in creating dynamic and responsive components.
• The $ and $$ methods provide convenient ways to query elements within the component’s render root and original content, respectively.

Light DOM Rendering - When using light DOM rendering (by setting useLight to true), be aware of potential style conflicts with the parent document. Use the addPageCSS method to scope styles appropriately.