Component Basics
Every Eddie component is a native web component with an ed- tag prefix:
<ed-button variant="primary" text="Submit"></ed-button>
<ed-heading tagName="h2">Section Title</ed-heading>
<ed-text-passage>
<p>Prose content goes here. Text passage handles all typography.</p>
</ed-text-passage>
Properties vs Slots
Components accept data through properties (attributes) and slots (projected content):
<!-- Property-based -->
<ed-button text="Click me" variant="primary"></ed-button>
<!-- Slot-based -->
<ed-card>
<img slot="header" src="hero.jpg" alt="Card hero" />
<p>Card body content goes in the default slot.</p>
<ed-button slot="footer" text="Action"></ed-button>
</ed-card>
Composition Patterns
Eddie encourages composition over configuration. Build complex UI by nesting simple components:
<ed-layout-container>
<ed-grid variant="1-3up">
<ed-grid-item>
<ed-card>
<ed-heading tagName="h2" variant="title">Card Title</ed-heading>
<ed-text-passage><p>Card content</p></ed-text-passage>
</ed-card>
</ed-grid-item>
</ed-grid>
</ed-layout-container>
Utility Classes
Eddie provides utility classes with the ed-u- prefix for layout adjustments:
<ed-heading class="ed-u-margin-bottom-md">Spaced Heading</ed-heading>
<div class="ed-u-display-block ed-u-margin-top-lg">Block content</div>
Form Components
Form-associated components use the EdFormElement base class and participate in native HTML forms via the ElementInternals API:
<form>
<ed-text-field label="Email" type="email" name="email"></ed-text-field>
<ed-select-field label="Role">
<option value="admin">Admin</option>
<option value="user">User</option>
</ed-select-field>
<ed-checkbox-field label="Preferences">
<ed-checkbox-field-item label="Email notifications" value="email"></ed-checkbox-field-item>
</ed-checkbox-field>
<ed-button variant="primary" text="Submit" type="submit"></ed-button>
</form>
Events
Components emit custom events via dispatch(). Listen for them with standard event listeners:
const button = document.querySelector('ed-button');
button.addEventListener('click', (e) => {
console.log('Button clicked');
});