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:



<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.




<html lang="en">
<head>
  <title>Home</title>
</head>
<body>
  

  <coralite-header></coralite-header>

  <main>
    <h1>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.



<template id="user-card">
  <div class="card">
    

    <h2>{{ name }}</h2>
    

    <p class="role">{{ role }}</p>
  </div>
</template>

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



<body>
  <h1>Our Team</h1>
  <div class="team-grid">
    

    <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.



<template id="alert-box">
  <div class="alert {{ type }}">
    <div class="alert-content">
      

      <slot></slot>
    </div>
  </div>
</template>

Using the slot:



<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 #