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.

Import

import { reactiveData } from '@semantic-ui/component';
import { reactiveConditional } from '@semantic-ui/component';
import { reactiveEach } from '@semantic-ui/component';
import { renderTemplate } from '@semantic-ui/component';

Directives

reactiveData

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

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: {{ count }}
const expr = reactiveData({
  expression: 'count',
  value: () => count.get()
});

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

reactiveConditional

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

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.

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

Example

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

renderTemplate

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

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: {{> header data=headerData}}
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

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

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

Sub-templates

// Template syntax
{{> header data=headerData}}

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

On This Page

Import

Directives

reactiveData

Parameters

Expression Object

Options Object

Example

reactiveConditional

Parameters

Options Object

Branch Object

Example

reactiveEach

Parameters

Options Object

Example

renderTemplate

Parameters

Options Object

Example

Usage in Templates

Data Binding

Conditional Rendering

Iteration

Sub-templates