Lit Directives

Semantic UI builds on Lit’s directive system to provide reactive data binding, conditional rendering, iteration, and template rendering. These directives are used internally by the template system and are automatically applied based on your template syntax.

Advanced Use It is not recommended to use these directives directly unless you are building custom template functionality. The template syntax will automatically use the appropriate directive.

Directives

reactiveData

Handles reactive data bindings in templates. Updates the DOM automatically when reactive values change.

import { reactiveData } from '@semantic-ui/renderer';

reactiveData(expression, options)

Parameters

Name	Type	Required	Description
expression	Object	Yes	Expression configuration object
options	Object	No	Directive options

Expression Object

Property	Type	Required	Description
value	Function	Yes	Function that returns the value
expression	string	Yes	Original template expression

Options Object

Property	Type	Default	Description
ifDefined	boolean	false	Use ifDefined directive
unsafeHTML	boolean	false	Use unsafeHTML directive

Example

Template syntax

const expr = reactiveData({
  expression: 'count',
  value: () => count.get()
});

Equivalent Directive

const expr = reactiveData({
  expression: 'content',
  value: () => content.get()
}, {
  unsafeHTML: true
});

reactiveConditional

Handles conditional rendering in templates. Re-renders content when conditions change.

import { reactiveConditional } from '@semantic-ui/renderer';

reactiveConditional(options)

Parameters

Name	Type	Required	Description
options	Object	Yes	Conditional rendering options

Options Object

Property	Type	Required	Description
condition	Function	Yes	Condition evaluation function
content	Function	Yes	Content rendering function
branches	Array	No	Additional else/elseif branches

Branch Object

Property	Type	Required	Description
type	string	Yes	’else’ or ‘elseif’
condition	Function	No	Condition for ‘elseif’
content	Function	Yes	Content rendering function

Example

// Template: {{#if isVisible}} content {{/if}}
const conditional = reactiveConditional({
  condition: () => isVisible.get(),
  content: () => html`<div>Visible Content</div>`,
  branches: [
    {
      type: 'else',
      content: () => html`<div>Hidden Content</div>`
    }
  ]
});

reactiveEach

Handles array iteration in templates. Re-renders when array content changes.

import { reactiveEach } from '@semantic-ui/renderer';

reactiveEach(options)

Parameters

Name	Type	Required	Description
options	Object	Yes	Iteration options

Options Object

Property	Type	Required	Description
over	Function	Yes	Function returning array
content	Function	Yes	Item rendering function
as	string	No	Variable name for each item
indexAs	string	No	Custom name for the loop index
else	Function	No	Content to render if array empty

Example (basic)

// Template: {{#each items}} {{name}} {{/each}}
const list = reactiveEach({
  over: () => items.get(),
  content: (item) => html`<li>${item.name}</li>`,
  as: 'item'
});

Example (with else)

// Template:
// {{#each items}}
//   {{name}}
// {{else}}
//   No items available
// {{/each}}
const list = reactiveEach({
  over: () => items.get(),
  content: (item) => html`<li>${item.name}</li>`,
  as: 'item',
  else: () => html`<div class="empty-state">No items available</div>`
});

renderTemplate

Renders sub-templates within a template. Manages template lifecycle and cleanup.

import { renderTemplate } from '@semantic-ui/renderer';

renderTemplate(options)

Parameters

Name	Type	Required	Description
options	Object	Yes	Template rendering options

Options Object

Property	Type	Required	Description
subTemplates	Object	Yes	Available templates
templateName	string	Yes	Name of template to render
getTemplate	Function	No	Dynamic template getter
data	Object	No	Template data context
parentTemplate	Template	No	Parent template reference

Example

Template syntax

{> header data=headerData}

Equivalent directive

const template = renderTemplate({
  subTemplates: {
    header: HeaderTemplate
  },
  templateName: 'header',
  data: {
    title: 'Page Header'
  }
});

Usage in Templates

While these directives are typically used through template syntax, understanding how they work can be helpful for debugging or custom implementations.

Data Binding

Template Syntax

{ value }

Equivalent Directive

reactiveData({
  expression: 'value',
  value: () => value.get()
})

Conditional Rendering

Template syntax

{#if condition}
  content
{else}
  alternate
{/if}

Equivalent Directive

reactiveConditional({
  condition: () => condition.get(),
  content: () => html`content`,
  branches: [{
    type: 'else',
    content: () => html`alternate`
  }]
})

Iteration

Basic Iteration

Template syntax

{#each items as item}
  { item.name }
{/each}

Equivalent Directive

reactiveEach({
  over: () => items.get(),
  content: (item) => html`${item.name}`,
  as: 'item'
})

Iteration with Empty State

Template syntax

{#each items as item}
  { item.name }
{else}
  No items available
{/each}

Equivalent Directive

reactiveEach({
  over: () => items.get(),
  content: (item) => html`${item.name}`,
  as: 'item',
  else: () => html`No items available`
})

Iteration with Custom Index

Template syntax

{#each product, idx in products}
  { idx + 1 }. { product.name }
{/each}

Equivalent Directive

reactiveEach({
  over: () => products.get(),
  content: (product, idx) => html`${idx + 1}. ${product.name}`,
  as: 'product',
  indexAs: 'idx'
})

Sub-templates

Template syntax

{> header data=headerData}

Equivalent Directive

renderTemplate({
  templateName: 'header',
  data: headerData,
  subTemplates: availableTemplates
})