lelanthran
/
Zjs
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
ZjsComponent/README.md
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 HTML+JS fragments with local script scoping, simple lifecycle hooks, and
isolated DOM composition without needing a full framework. 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: A single component is a fragment of valid HTML that contains:
1. Zero or more HTML elements, 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 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** 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 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 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. `button` element call a method on the containing **ZjsComponent** instance.