A Web Component framework that works with plain HTML

Latest changes

GitHub

Joel

Getting Started

Welcome to the requery-js documentation - learn how to build HTML-first Web Components.


Introduction

This page will walk you through setting up requery-js locally or via the CDN.

Quick Start

Essentials

Unlike many frameworks, requery-js doesn't introduce a custom template syntax. Instead, it works with standard HTML and uses data attributes to mark interactive elements. This makes it compatible with visual website builders and keeps your markup clean and semantic.

Template Syntax

Components in requery-js are built on Web Components (Custom Elements), allowing you to create reusable UI elements with their own properties, state, and behaviours.

Components Basics

In requery-js, elements are reactive references to DOM nodes tagged with the rq attribute. They provide a fluent API for manipulating the DOM and applying reactive behaviours.

Element Basics

Reactivity is a programming paradigm in which changes to data automatically trigger updates in the UI. Under the hood, requery-js uses Vue's reactivity system to make this possible.


Reactivity 101

Managing dynamic classes and styles is a fundamental part of building interactive interfaces. While requery-js `bind()` method can handle any attribute binding, class and style bindings often require more complex logic than simple string values. To make this easier, requery-js provides enhanced handling for class and style bindings that lets you work with objects and arrays directly, eliminating the need for manual string manipulation.


Class and Style Bindings

There are two main ways to conditionally display elements in requery-js: `if()` for conditional rendering and `show()` for toggling visibility.


Conditional Rendering

We can use the `for()` method to render a list of items based on a reactive array. Lists in requery-js support both keyed and non-keyed rendering.


List Rendering

Handling user interactions is a fundamental part of any Web Component. The `on()` method provides a straightforward way to listen for and respond to DOM events.

Event Handling

Form input elements maintain their own internal state. The `bind()` and `on()` methods provide a way to create two-way bindings between form inputs and component state.


Form Input Bindings

Mastering Components

Props allow components to receive data. They form part of a component's public interface and enable one-way data flow from parent to child.

Props

The store option defines a component's internal reactive state. Unlike props, which flow from parent to child, store values can be freely modified within the component.

Store

Actions expose a component's public methods. They're like buttons on your component that other components or code can trigger. Just as a TV remote has buttons for changing channels or volume, your component can have actions for functionality like "increment", "reset", and "submit".

Actions

Events let components communicate with their parents. Just like clicking a button triggers a click event, your components can trigger custom events that parents can listen for.