Component System

Component System

TesseraUI supports reusable UI components defined with <template> and composed with <slot> injection points — similar to Web Components.

---

Defining a component

Use a <template name="..."> block at the top of an HTML file:

<template name="card">
  <col class="card">
    <row class="card-header">
      <slot name="title"/>
    </row>
    <col class="card-body">
      <slot/>
    </col>
  </col>
</template>

Important: <template> elements are registered to the component registry and are not rendered as part of the main layout. The rest of the file (after the template block) is the main content.

---

Using a component

Reference the template by its name attribute as a custom tag:

<row>
  <card>
    <h3 slot="title">Alpha</h3>
    <p>First card content.</p>
  </card>
  <card>
    <h3 slot="title">Beta</h3>
    <p>Second card content.</p>
  </card>
</row>

Named slots

Content with a slot="name" attribute is injected into the <slot name="name"/> placeholder.

Default slot

Content without a slot attribute goes into <slot/> (the unnamed default slot).

---

Multi-component files

You can define multiple templates in a single file, or split them into separate files. TesseraUI registers all templates globally when any template from the same file is loaded.

<!-- components.html -->
<template name="card">
  <col class="card">
    <slot/>
  </col>
</template>

<template name="badge-row">
  <row class="badge-row">
    <slot/>
  </row>
</template>

<!-- Main content — not shown (no non-template root element) -->

Load the file first so the components are registered:

TesseraTemplate.load("yourmod:ui/components");

Then use the components in another template:

<card>
  <h2>Title</h2>
  <badge-row>
    <badge>New</badge>
    <badge>Hot</badge>
  </badge-row>
</card>

---

CSS for components

Apply styles to component classes as usual. The component's internal structure can be styled from the parent file's CSS:

/* card component */
.card        { background: #1e2433; border: 1px solid #b87333; padding: 6px; gap: 4px; }
.card-header { border-bottom: 1px solid #b87333; padding-bottom: 4px; }
.card-body   { padding-top: 4px; }

---

Programmatic registration

Register a component from Java (useful for shared library components):

TesseraNode templateRoot = /* parse or build a TesseraNode tree */;
TesseraComponentRegistry.register("my-widget", templateRoot);

---

Limitations

• Slots are positional — components do not currently support reactive prop passing (use model binding for dynamic content).
• v-for on a component tag is not supported; use v-for inside the template definition instead.