Features

Props

Props let you pass text values into a component template at usage time using data-bascik-prop-* attributes.

See it in action

This example passes values directly into the feature-card component via data-bascik-prop-* attributes.

src/pages/index.html

Component Props

These values are injected into the component template at build time.

html 
<feature-card
  data-bascik-prop-title="Component Props"
  data-bascik-prop-desc="These values are injected into the component template at build time.">
</feature-card>
Output is shown unminified (HTML, CSS, JS, and identifier names) for readability.
html 
<div class="bascik__feature-card__fcard">
  <h3 class="bascik__feature-card__el__h3">Component Props</h3>
  <p class="bascik__feature-card__el__p">These values are injected into the component template at build time.</p>
</div>

Define and pass props

Props in Bascik borrow the same basic idea as props in React: pass values into a reusable component from the usage site. In Bascik, the mechanism is vanilla HTML via data-bascik-prop-* attributes.

Add a data-bascik-prop-{name} attribute (no value) to any element in the component template. The element's inner content will be replaced with the prop value at build time.

Set data-bascik-prop-{name}="value" on the component tag. The value is injected into the matching template element.

src/components/alert-box/
html 
<alert-box
  data-bascik-prop-title="Success"
  data-bascik-prop-message="Your changes have been saved.">
</alert-box>
html 
<aside class="alert-box">
  <strong class="alert-box-title" data-bascik-prop-title>Notice</strong>
  <p class="alert-box-message" data-bascik-prop-message>
    Props replace this text at build time.
  </p>
</aside>
css 
.alert-box {
  padding: 20px;
  border: 1px solid #3a3d40;
  border-left: 3px solid #d3ff8d;
}
Output is shown unminified (HTML, CSS, JS, and identifier names) for readability.
html 
<aside class="bascik__alert-box__alert-box">
  <strong class="bascik__alert-box__alert-box-title">Success</strong>
  <p class="bascik__alert-box__alert-box-message">Your changes have been saved.</p>
</aside>

Props with Existing Attributes

Other attributes on the target element are preserved. The prop marker attribute itself is removed from the output.

html 
<!-- template -->
<p class="lead" data-bascik-prop-body></p>

<!-- compiled -->
<p class="bascik__comp__lead">Your prop value here.</p>

Naming Conventions

Prop names use the portion of the attribute after data-bascik-prop-. You can use lowercase alphanumeric names with hyphens:

html 
data-bascik-prop-title
data-bascik-prop-href
data-bascik-prop-alt-text
data-bascik-prop-icon-url

Use slots for HTML content. Props inject plain text values. If you need to inject rich HTML, nested elements, or reusable layout regions, use slots instead.

Why data-*?

Bascik extends HTML through standard data-* attributes rather than a custom template language. Browsers already understand data-*, and you do not need to use props or slots to make Bascik useful, plain reusable HTML components still work without them.

MDN reference. For the underlying attribute rules, treat MDN's data-* attribute reference and the broader HTML reference as the primary documentation.

Example: Feature Card

A common pattern is a card component with a configurable label, title, and description:

html 
<!-- src/components/feature-card.html -->
<div class="card">
  <span class="card-label" data-bascik-prop-label></span>
  <h3 data-bascik-prop-title></h3>
  <p data-bascik-prop-desc></p>
</div>
html 
<feature-card
  data-bascik-prop-label="New"
  data-bascik-prop-title="Live Reload"
  data-bascik-prop-desc="Automatic browser reload on every change.">
</feature-card>