Core Concepts: Static Components

Static components are the building blocks of Coralite. They are purely HTML-based elements without complex scripting logic. If a piece of UI doesn't need to fetch data, handle user events, or compute complex values, it should be a static component.

Component Definition #

Every component in Coralite is defined inside an HTML file using the standard <template> tag. The most important part of a component is its id attribute. This ID becomes the custom HTML tag name you will use to include the component in your pages.

For example, if you create a file src/components/header.html, the component definition looks like this:

<!-- src/components/header.html -->
<template id="coralite-header">
  <header class="site-header">
    <nav>
      <ul>
        <li><a href="/">Home</a></li>
        <li><a href="/about">About</a></li>
      </ul>
    </nav>
  </header>
</template>

Using Components #

To use the component in your pages (or inside other components), the custom element tag name must exactly match the component's id.

Coralite components are server-side rendered (SSR). When you run the build command, Coralite replaces the custom tag with the actual HTML content of your template.

<!-- src/pages/index.html -->

<html lang="en">
<head>
  <title>Home</title>
</head>
<body>
  <!-- The tag name matches the template ID -->
  <coralite-header></coralite-header>

  <main>
    <h1 class="display">Welcome to my site!</h1>
  </main>
</body>
</html>

Basic Data Binding #

You can pass data into static components using standard HTML attributes. Coralite allows you to display these attribute values inside your component using double curly braces ({{ }}).

For instance, let's create a reusable <user-card> component.

<!-- src/components/user-card.html -->
<template id="user-card">
  <div class="card">
    <!-- The 'name' attribute value will be injected here -->
    <h2>{{ name }}</h2>
    <!-- The 'role' attribute value will be injected here -->
    <p class="role">{{ role }}</p>
  </div>
</template>

Now, when using the component, simply pass the data as attributes:

⚠️ Warning: AST Splicing (Host Tag Removal)

Coralite's server completely deletes the host tag of declarative components and replaces it with the template's inner HTML. If you try to style the host tag (e.g., <user-card class="foo">) in CSS or use it as a flex container, it will break because the tag simply won't exist in the final HTML.

<!-- src/pages/team.html -->
<body>
  <h1 class="display">Our Team</h1>
  <div class="team-grid">
    <!-- Passing data via attributes -->
    <user-card name="Alice Smith" role="Lead Developer"></user-card>
    <user-card name="Bob Jones" role="Designer"></user-card>
  </div>
</body>

Standard Slots #

Sometimes you need to pass entire blocks of HTML into a component, not just simple text attributes. Coralite supports standard HTML <slot> elements for this purpose.

A slot acts as a placeholder where the content between the component tags will be inserted.

<!-- src/components/alert-box.html -->
<template id="alert-box">
  <div class="alert {{ type }}">
    <div class="alert-content">
      <!-- Content passed between  tags goes here -->
      <slot></slot>
    </div>
  </div>
</template>

Using the slot:

<!-- src/pages/index.html -->
<alert-box type="warning">
  <strong>Warning:</strong> Your session is about to expire.
      </alert-box>

<alert-box type="success">
  <p>Profile updated successfully!</p>
  <button>View Profile</button>
</alert-box>

Summary #