Updates docs.

This commit is contained in:
lelanthran 2025-04-06 10:23:23 +02:00
parent a611eaa81e
commit 4c9b3f5ac8
1 changed files with 23 additions and 1 deletions

View File

@ -5,6 +5,18 @@ modular, reusable front-end UI components. It allows dynamic loading of
HTML+JS fragments with local script scoping, simple lifecycle hooks, and
isolated DOM composition without needing a full framework.
A single component is simply a fragment of valid HTML that s downloaded and
inserted into the DOM. Scripts in that fragment are scoped to that fragment
alone. An instance of a **ZjsComponent** is created for that fragment which
will have specific functions (identified by the component author) created as
methods on that instance.
To insert a component, which can be a full and rich component containing
complex sub-DOM and methods on the object, do this:
```html
<zjs-component remote-src=somefile.zjsc> </zjs-component>
```
A single component is a fragment of valid HTML that contains:
1. Zero or more HTML elements,
@ -18,7 +30,17 @@ closest **ZjsComponent** ancestor and execute the method on that instance.
At it's minimal usage, **ZjsComponent** can simply be used for client-side
includes of HTML. With full leverage of all it's features, **ZjsComponent**
can be used to create reusable HTML web components in the simplest way
possible.
possible while allowing the component developer to:
1. Scope access to DOM elements to only those in the HTML fragment that is
loaded.
2. Scope access to Javascript to only that **ZjsComponent** instance
represented by the fragment of HTML.
> **NOTE** Not scoping the CSS is a deliberate decision. CSS within the
> fragment *is not scoped*, to allow usage of site-wide and global theming by
> the site author. This dual-cutting sword also means that `<style>` elements
> within a fragment will interfere with the global CSS scopes.
The example below shows how this can be used within plain HTML to let a
`button` element call a method on the containing **ZjsComponent** instance.