mirror of
https://github.com/jaandrle/deka-dom-el
synced 2025-07-01 04:12:14 +02:00
🔨 docs+addons
This commit is contained in:
@ -1,15 +1,22 @@
|
||||
import { assignAttribute, classListDeclarative } from "deka-dom-el";
|
||||
import { assign, assignAttribute, classListDeclarative } from "deka-dom-el";
|
||||
const paragraph= document.createElement("p");
|
||||
|
||||
assignAttribute(paragraph, "textContent", "Hello, world!");
|
||||
|
||||
assignAttribute(paragraph, "style", "color: red; font-weight: bold;");
|
||||
assignAttribute(paragraph, "style", { color: "navy" });
|
||||
|
||||
assignAttribute(paragraph, "dataTest1", "v1");
|
||||
assignAttribute(paragraph, "dataset", { test2: "v2" });
|
||||
|
||||
assignAttribute(paragraph, "ariaLabel", "v1");
|
||||
assignAttribute(paragraph, "ariaset", { role: "none" });
|
||||
|
||||
assign(paragraph, { //textContent and style see above
|
||||
ariaLabel: "v1", //data* see above
|
||||
ariaset: { role: "none" }, // dataset see above
|
||||
"=onclick": "console.log(event)",
|
||||
onmouseout: console.info,
|
||||
".something": "something",
|
||||
classList: {} //see below
|
||||
});
|
||||
|
||||
classListDeclarative(paragraph, {
|
||||
classAdd: true,
|
||||
@ -20,6 +27,7 @@ classListDeclarative(paragraph, {
|
||||
});
|
||||
|
||||
console.log(paragraph.outerHTML);
|
||||
console.log("paragraph.something=", paragraph.something);
|
||||
document.body.append(
|
||||
paragraph
|
||||
);
|
||||
|
@ -1,7 +1,7 @@
|
||||
import { el, on } from "deka-dom-el";
|
||||
const abort_controller= new AbortController();
|
||||
const { signal }= abort_controller;
|
||||
/** @type {ddeElementModifier<HTMLButtonElement>} */
|
||||
/** @type {ddeElementAddon<HTMLButtonElement>} */
|
||||
const onclickOff= on("click", ()=> abort_controller.abort(), { signal });
|
||||
/** @type {(ref?: HTMLOutputElement)=> HTMLOutputElement | null} */
|
||||
const ref= (store=> ref=> ref ? (store= ref) : store)(null);
|
||||
|
Reference in New Issue
Block a user