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.
Written By Joel
Last updated About 1 month ago
Marking Interactive Elements
Use the rq
attribute to tag elements that should be interactive or reactive:
<p rq="count">0</p>
<button rq="button">Click me!</button>
Tagged elements can then be queried and manipulated in your component's setup function:
component.query("count").text(() => store.count);
component.query("button").on("click", () => {
store.count++;
});
Component Props
Props are passed to components using the prop:
prefix on attributes:
<rq-counter prop:max="5">
<!-- Component content -->
</rq-counter>
Hiding Initial State
Use the rq-cloak
attribute to hide elements until they are initialised:
/* Hide elements until they are initialised */
[rq-cloak='hidden'] { display: none }
/* Hide elements but maintain layout */
[rq-cloak='invisible'] { visibility: hidden }
Could not load article.
Could not load article.