GoKawiilAre you an LLM? View /llms.txt for optimized Markdown documentation, or /llms-full.txt for full documentation bundle
██████████ ████ ░░███░░░░░█░░███ ░███ █ ░ ░███ ██████ ████████ ██████ ░██████ ░███ ███░░███░░███░░███ ░░░░░███ ░███░░█ ░███ ░███████ ░███ ░███ ███████ ░███ ░ █ ░███ ░███░░░ ░███ ░███ ███░░███ ██████████ █████░░██████ ████ █████░░████████ ░░░░░░░░░░ ░░░░░ ░░░░░░ ░░░░ ░░░░░ ░░░░░░░░ ░█ Simple, tiny library for building Progressive Web Components.|
Introduction
What is Elena?
Elena is a simple, tiny library for building Progressive Web Components. Unlike most web component libraries, Elena doesn’t force JavaScript for everything. You can load HTML and CSS first, then use JavaScript to progressively add interactivity.
Here is a minimal example
HTML Styles JavaScript html < elena-stack direction = "row" > < div >First</ div > < div >Second</ div > < div >Third</ div > </ elena-stack > css @scope (elena-stack) { :scope { display : flex ; justify-content : flex-start ; align-items : flex-start ; flex-flow : column wrap ; flex-direction : column ; gap : 0.5 rem ; } :scope [ direction = "row" ] { flex-direction : row ; } } js import { Elena } from "@elenajs/core" ; export default class Stack extends Elena (HTMLElement) { static tagName = "elena-stack" ; static props = [ "direction" ]; direction = "column" ; } Stack. define ();
Try it in the playground
Prerequisites This documentation assumes familiarity with HTML, CSS, and JavaScript. If you're new to custom elements, the MDN guide is a good starting point, though prior experience is not required.
Why was Elena created
... continue reading