jaandrle/deka-dom-el
1
0
Fork 0
mirror of https://github.com/jaandrle/deka-dom-el synced 2025-07-01 12:22:15 +02:00
Code Packages Releases Activity

🚀 use native listeners & scope

Browse Source
This commit is contained in:
Jan Andrle
2023-10-09 13:49:38 +02:00
parent 7417565fa5
commit ebbb76e9a0
12 changed files with 668 additions and 579 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
examples/components/fullNameComponent.js
View File

@ -1,15 +1,17 @@
import { style, el, on, S, namespace } from '../exports.js';
import { style, el, on, S } from '../exports.js';
const className= style.host(fullNameComponent).css`
:host form{
display: flex;
flex-flow: column nowrap;
}
`;
export function fullNameComponent(){
export function fullNameComponent(_, scope){
const labels= [ "Name", "Surname" ];
const name= labels.map(_=> S(""));
const full_name= S(()=>
name.map(l=> l()).filter(Boolean).join(" ") || "-");
scope(on.connected(()=> console.log(fullNameComponent)));
scope(on.disconnected(()=> console.log(fullNameComponent)))
return el("div", { className }).append(
el("h2", "Simple form:"),
@ -24,7 +26,7 @@ export function fullNameComponent(){
": ",
el("#text", full_name)
),
namespace("svg").append(
scope.elNamespace("svg").append(
el("svg", { viewBox: "0 0 240 80", style: { height: "80px", display: "block" } }).append(
//el("style", { })
el("text", { x: 20, y: 35, textContent: "Text" })

3
examples/components/webComponent.js
View File

@ -17,7 +17,8 @@ export class CustomHTMLTestElement extends HTMLElement{
}
render({ name, test, preName }, host){
host(on.connected(console.log));
host(on.connected(()=> console.log(CustomHTMLTestElement)));
host(on.disconnected(()=> console.log(CustomHTMLTestElement)));
return el("p").append(
el("#text", { textContent: name }),
el("#text", { textContent: test }),