💥 WC

README.md

@@ -29,7 +29,7 @@ In the meaning of size, complexity and usability.
 An another goal is making clear library logic. Starting from pure native JavaScript (DOM API),
 then using small utils (`assign`, `S`, …, `el`, …) and end up with way to write complex code.
 Therefore, you can use any „internal” function to make live with native JavaScript easier
-(`assign`, `classListDeclarative`, `on`, `dispatchEvent`, …, `S`, …) regarding if you don’t
+(`assign`, `classListDeclarative`, `on`, `dispatchEvent`, …, `S`, …) regarding if you
 need complex library/framework.
 
 As consequence of that, it shouldn’t be hard to incorporate the library into existing projects.

dist/esm-with-signals.d.ts

@@ -1,16 +1,23 @@
+type CustomElementTagNameMap= { '#text': Text, '#comment': Comment }
+declare global {
+	interface ddePublicElementTagNameMap{
+	}
+}
+type SupportedElement=
+	  HTMLElementTagNameMap[keyof HTMLElementTagNameMap]
+	| SVGElementTagNameMap[keyof SVGElementTagNameMap]
+	| MathMLElementTagNameMap[keyof MathMLElementTagNameMap]
+	| CustomElementTagNameMap[keyof CustomElementTagNameMap]
+	| ddePublicElementTagNameMap[keyof ddePublicElementTagNameMap];
 declare global {
 	type ddeComponentAttributes= Record<any, any> | undefined | string;
-	type ddeElementModifier<El extends HTMLElement | SVGElement | Comment | DocumentFragment>= (element: El)=> El;
+	type ddeElementModifier<El extends SupportedElement | DocumentFragment>= (element: El)=> El;
 }
-type ElementTagNameMap= HTMLElementTagNameMap & { // & SVGElementTagNameMap
-	'#text': Text
-}
-type Element= ElementTagNameMap[keyof ElementTagNameMap];
 type AttrsModified= {
 	/**
-	 * In fact argumen for `*.setAttribute("style", *)`.
+	 * Use string like in HTML (internally uses `*.setAttribute("style", *)`), or object representation (like DOM API).
 	 */
-	style: string
+	style: string | Partial<CSSStyleDeclaration>
 	/**
 	 * Provide option to add/remove/toggle CSS clasess (index of object) using 1/0/-1. In fact `el.classList.toggle(class_name)` for `-1` and `el.classList.toggle(class_name, Boolean(...))` for others.
 	 */
@@ -32,51 +39,81 @@ type AttrsModified= {
  * There is added support for `data[A-Z].*`/`aria[A-Z].*` to be converted to the kebab-case alternatives.
  * @private
  */
-type ElementAttributes<T extends keyof ElementTagNameMap | ElementTagNameMap[keyof ElementTagNameMap]>=
-	T extends keyof ElementTagNameMap ?
-	Omit<ElementTagNameMap[T],"classList"|"className"> & AttrsModified :
-	Omit<T,"classList"|"className"> & AttrsModified;
-export function assign<El extends Element>(element: El, ...attrs_array: Partial<ElementAttributes<El>>[]): El
-export function el<TAG extends keyof ElementTagNameMap>(
+type ElementAttributes<T extends SupportedElement>= Omit<T,keyof AttrsModified> & AttrsModified;
+export function assign<El extends SupportedElement>(element: El, ...attrs_array: Partial<ElementAttributes<El>>[]): El
+type ExtendedHTMLElementTagNameMap= HTMLElementTagNameMap & CustomElementTagNameMap & ddePublicElementTagNameMap
+export function el<TAG extends keyof ExtendedHTMLElementTagNameMap>(
 	tag_name: TAG,
-	attrs?: Partial<ElementAttributes<ElementTagNameMap[TAG]>>,
-	...modifiers: ddeElementModifier<ElementTagNameMap[TAG]>[]
-): ElementTagNameMap[TAG]
+	attrs?: string | Partial<ElementAttributes<ExtendedHTMLElementTagNameMap[TAG]>>,
+	...modifiers: ddeElementModifier<ExtendedHTMLElementTagNameMap[TAG]>[]
+): ExtendedHTMLElementTagNameMap[TAG]
 export function el<T>(
 	tag_name?: "<>",
 ): DocumentFragment
 export function el<
 	A extends ddeComponentAttributes,
-	C extends (attr: A)=> Element | DocumentFragment>(
+	C extends (attr: A)=> SupportedElement | DocumentFragment>(
 	fComponent: C,
 	attrs?: A,
 	...modifiers: ddeElementModifier<ReturnType<C>>[]
 ): ReturnType<C>
 export function el(
 	tag_name: string,
-	attrs?: Record<string, any>,
-	...modifiers: ddeElementModifier<HTMLElement | SVGElement>[]
+	attrs?: string | Record<string, any>,
+	...modifiers: ddeElementModifier<HTMLElement>[]
 ): HTMLElement
-export function dispatchEvent(element: HTMLElement, name: keyof DocumentEventMap): void;
-export function dispatchEvent(element: HTMLElement, name: string, data: any): void;
+export function elNS(
+	namespace: "http://www.w3.org/2000/svg"
+): <TAG extends keyof SVGElementTagNameMap, KEYS extends keyof SVGElementTagNameMap[TAG] & { d: string }>(
+	tag_name: TAG,
+	attrs?: string | Partial<{ [key in KEYS]: SVGElementTagNameMap[TAG][key] | string | number | boolean }>,
+	...modifiers: ddeElementModifier<SVGElementTagNameMap[TAG]>[]
+)=> SVGElementTagNameMap[TAG]
+export function elNS(
+	namespace: "http://www.w3.org/1998/Math/MathML"
+): <TAG extends keyof MathMLElementTagNameMap, KEYS extends keyof MathMLElementTagNameMap[TAG] & { d: string }>(
+	tag_name: TAG,
+	attrs?: string | Partial<{ [key in KEYS]: MathMLElementTagNameMap[TAG][key] | string | number | boolean }>,
+	...modifiers: ddeElementModifier<MathMLElementTagNameMap[TAG]>[]
+)=> MathMLElementTagNameMap[TAG]
+export function elNS(
+	namespace: string
+): (
+	tag_name: string,
+	attrs?: string | Record<string, any>,
+	...modifiers: ddeElementModifier<SupportedElement>[]
+)=> SupportedElement
+export function dispatchEvent(element: SupportedElement, name: keyof DocumentEventMap): void;
+export function dispatchEvent(element: SupportedElement, name: string, data: any): void;
 interface On{
+	/** Listens to the DOM event. See {@link Document.addEventListener} */
 	<
-		EE extends ddeElementModifier<Element>,
+		EE extends ddeElementModifier<SupportedElement>,
 		El extends ( EE extends ddeElementModifier<infer El> ? El : never ),
 		Event extends keyof DocumentEventMap>(
 			type: Event,
 			listener: (this: El, ev: DocumentEventMap[Event]) => any,
 			options?: AddEventListenerOptions
 		) : EE;
+	/** Listens to the element is connected to the live DOM. In case of custom elements uses [`connectedCallback`](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements#custom_element_lifecycle_callbacks), or {@link MutationObserver} else where */
 	connected<
-		EE extends ddeElementModifier<Element>,
+		EE extends ddeElementModifier<SupportedElement>,
 		El extends ( EE extends ddeElementModifier<infer El> ? El : never )
 		>(
 			listener: (el: El) => any,
 			options?: AddEventListenerOptions
 		) : EE;
+	/** Listens to the element is disconnected from the live DOM. In case of custom elements uses [`disconnectedCallback`](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements#custom_element_lifecycle_callbacks), or {@link MutationObserver} else where */
 	disconnected<
-		EE extends ddeElementModifier<Element>,
+		EE extends ddeElementModifier<SupportedElement>,
+		El extends ( EE extends ddeElementModifier<infer El> ? El : never )
+		>(
+			listener: (el: El) => any,
+			options?: AddEventListenerOptions
+		) : EE;
+	/** Listens to the element attribute changes. In case of custom elements uses [`attributeChangedCallback`](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements#custom_element_lifecycle_callbacks), or {@link MutationObserver} else where */
+	attributeChanged<
+		EE extends ddeElementModifier<SupportedElement>,
 		El extends ( EE extends ddeElementModifier<infer El> ? El : never )
 		>(
 			listener: (el: El) => any,
@@ -84,126 +121,316 @@ interface On{
 		) : EE;
 }
 export const on: On;
+type Scope= { scope: Node | Function | Object, host: ddeElementModifier<any>, prevent: boolean, inherit_host: boolean, }
+/** Current scope created last time the `el(Function)` was invoke. (Or {@link scope.push}) */
 export const scope: {
-	namespace: string,
+	current: Scope,
+	/** Stops all automatizations. E. g. signals used as attributes in current scope
+	 * registers removing these listeners (and clean signal if no other listeners are detected)
+	 * on `disconnected` event. */
+	preventDefault<T extends boolean>(prevent: T): T,
+	/**
+	 * This represents reference to the current host element — `scope.host()`.
+	 * It can be also used to register Modifier (function to be called when component is initized)
+	 * — `scope.host(on.connected(console.log))`.
+	 * */
 	host: ddeElementModifier<any>,
-	elNamespace: (ns: string)=> ({ append(...els: (HTMLElement | SVGElement)[]): HTMLElement | SVGElement | DocumentFragment })
+	
+	state: Scope[],
+	/** Adds new child scope. All attributes are inherited by default. */
+	push(scope: Partial<Scope>): ReturnType<Array<Scope>["push"]>,
+	/** Removes last/current child scope. */
+	pop(): ReturnType<Array<Scope>["pop"]>,
 };
-//TODO for SVG
+/*
+ * TODO TypeScript HACK (better way?)
+ * this doesnt works
+ * ```ts
+ * interface element<el> extends Node{
+ * 	prototype: el;
+ * 	append(...els: (SupportedElement | DocumentFragment | string | element<SupportedElement | DocumentFragment>)[]): el
+ * }
+ * export function el<T>(
+ * 	tag_name?: "<>",
+ * ): element<DocumentFragment>
+ * ```
+ * …as its complains here
+ * ```ts
+ * const d= el("div");
+ * const f= (a: HTMLDivElement)=> a;
+ * f(d); //←
+ * document.head.append( //←
+ * 	el("script", { src: "https://flems.io/flems.html", type: "text/javascript", charset: "utf-8" }),
+ * );
+ * ```
+ * TODO for SVG
+ * */
+type ddeAppend<el>= (...nodes: (Node | string)[])=> el;
 declare global{
-	interface HTMLDivElement{ append(...nodes: (Node | string)[]): HTMLDivElement; }
-	interface HTMLAnchorElement{ append(...nodes: (Node | string)[]): HTMLAnchorElement; }
-	interface HTMLElement{ append(...nodes: (Node | string)[]): HTMLElement; }
-	interface HTMLElement{ append(...nodes: (Node | string)[]): HTMLElement; }
-	interface HTMLAreaElement{ append(...nodes: (Node | string)[]): HTMLAreaElement; }
-	interface HTMLElement{ append(...nodes: (Node | string)[]): HTMLElement; }
-	interface HTMLElement{ append(...nodes: (Node | string)[]): HTMLElement; }
-	interface HTMLAudioElement{ append(...nodes: (Node | string)[]): HTMLAudioElement; }
-	interface HTMLElement{ append(...nodes: (Node | string)[]): HTMLElement; }
-	interface HTMLBaseElement{ append(...nodes: (Node | string)[]): HTMLBaseElement; }
-	interface HTMLElement{ append(...nodes: (Node | string)[]): HTMLElement; }
-	interface HTMLElement{ append(...nodes: (Node | string)[]): HTMLElement; }
-	interface HTMLQuoteElement{ append(...nodes: (Node | string)[]): HTMLQuoteElement; }
-	interface HTMLBodyElement{ append(...nodes: (Node | string)[]): HTMLBodyElement; }
-	interface HTMLBRElement{ append(...nodes: (Node | string)[]): HTMLBRElement; }
-	interface HTMLButtonElement{ append(...nodes: (Node | string)[]): HTMLButtonElement; }
-	interface HTMLCanvasElement{ append(...nodes: (Node | string)[]): HTMLCanvasElement; }
-	interface HTMLTableCaptionElement{ append(...nodes: (Node | string)[]): HTMLTableCaptionElement; }
-	interface HTMLElement{ append(...nodes: (Node | string)[]): HTMLElement; }
-	interface HTMLElement{ append(...nodes: (Node | string)[]): HTMLElement; }
-	interface HTMLTableColElement{ append(...nodes: (Node | string)[]): HTMLTableColElement; }
-	interface HTMLTableColElement{ append(...nodes: (Node | string)[]): HTMLTableColElement; }
-	interface HTMLDataElement{ append(...nodes: (Node | string)[]): HTMLDataElement; }
-	interface HTMLDataListElement{ append(...nodes: (Node | string)[]): HTMLDataListElement; }
-	interface HTMLElement{ append(...nodes: (Node | string)[]): HTMLElement; }
-	interface HTMLModElement{ append(...nodes: (Node | string)[]): HTMLModElement; }
-	interface HTMLDetailsElement{ append(...nodes: (Node | string)[]): HTMLDetailsElement; }
-	interface HTMLElement{ append(...nodes: (Node | string)[]): HTMLElement; }
-	interface HTMLDialogElement{ append(...nodes: (Node | string)[]): HTMLDialogElement; }
-	interface HTMLDivElement{ append(...nodes: (Node | string)[]): HTMLDivElement; }
-	interface HTMLDListElement{ append(...nodes: (Node | string)[]): HTMLDListElement; }
-	interface HTMLElement{ append(...nodes: (Node | string)[]): HTMLElement; }
-	interface HTMLElement{ append(...nodes: (Node | string)[]): HTMLElement; }
-	interface HTMLEmbedElement{ append(...nodes: (Node | string)[]): HTMLEmbedElement; }
-	interface HTMLFieldSetElement{ append(...nodes: (Node | string)[]): HTMLFieldSetElement; }
-	interface HTMLElement{ append(...nodes: (Node | string)[]): HTMLElement; }
-	interface HTMLElement{ append(...nodes: (Node | string)[]): HTMLElement; }
-	interface HTMLElement{ append(...nodes: (Node | string)[]): HTMLElement; }
-	interface HTMLFormElement{ append(...nodes: (Node | string)[]): HTMLFormElement; }
-	interface HTMLHeadingElement{ append(...nodes: (Node | string)[]): HTMLHeadingElement; }
-	interface HTMLHeadingElement{ append(...nodes: (Node | string)[]): HTMLHeadingElement; }
-	interface HTMLHeadingElement{ append(...nodes: (Node | string)[]): HTMLHeadingElement; }
-	interface HTMLHeadingElement{ append(...nodes: (Node | string)[]): HTMLHeadingElement; }
-	interface HTMLHeadingElement{ append(...nodes: (Node | string)[]): HTMLHeadingElement; }
-	interface HTMLHeadingElement{ append(...nodes: (Node | string)[]): HTMLHeadingElement; }
-	interface HTMLHeadElement{ append(...nodes: (Node | string)[]): HTMLHeadElement; }
-	interface HTMLElement{ append(...nodes: (Node | string)[]): HTMLElement; }
-	interface HTMLElement{ append(...nodes: (Node | string)[]): HTMLElement; }
-	interface HTMLHRElement{ append(...nodes: (Node | string)[]): HTMLHRElement; }
-	interface HTMLHtmlElement{ append(...nodes: (Node | string)[]): HTMLHtmlElement; }
-	interface HTMLElement{ append(...nodes: (Node | string)[]): HTMLElement; }
-	interface HTMLIFrameElement{ append(...nodes: (Node | string)[]): HTMLIFrameElement; }
-	interface HTMLImageElement{ append(...nodes: (Node | string)[]): HTMLImageElement; }
-	interface HTMLInputElement{ append(...nodes: (Node | string)[]): HTMLInputElement; }
-	interface HTMLModElement{ append(...nodes: (Node | string)[]): HTMLModElement; }
-	interface HTMLElement{ append(...nodes: (Node | string)[]): HTMLElement; }
-	interface HTMLLabelElement{ append(...nodes: (Node | string)[]): HTMLLabelElement; }
-	interface HTMLLegendElement{ append(...nodes: (Node | string)[]): HTMLLegendElement; }
-	interface HTMLLIElement{ append(...nodes: (Node | string)[]): HTMLLIElement; }
-	interface HTMLLinkElement{ append(...nodes: (Node | string)[]): HTMLLinkElement; }
-	interface HTMLElement{ append(...nodes: (Node | string)[]): HTMLElement; }
-	interface HTMLMapElement{ append(...nodes: (Node | string)[]): HTMLMapElement; }
-	interface HTMLElement{ append(...nodes: (Node | string)[]): HTMLElement; }
-	interface HTMLMenuElement{ append(...nodes: (Node | string)[]): HTMLMenuElement; }
-	interface HTMLMetaElement{ append(...nodes: (Node | string)[]): HTMLMetaElement; }
-	interface HTMLMeterElement{ append(...nodes: (Node | string)[]): HTMLMeterElement; }
-	interface HTMLElement{ append(...nodes: (Node | string)[]): HTMLElement; }
-	interface HTMLElement{ append(...nodes: (Node | string)[]): HTMLElement; }
-	interface HTMLObjectElement{ append(...nodes: (Node | string)[]): HTMLObjectElement; }
-	interface HTMLOListElement{ append(...nodes: (Node | string)[]): HTMLOListElement; }
-	interface HTMLOptGroupElement{ append(...nodes: (Node | string)[]): HTMLOptGroupElement; }
-	interface HTMLOptionElement{ append(...nodes: (Node | string)[]): HTMLOptionElement; }
-	interface HTMLOutputElement{ append(...nodes: (Node | string)[]): HTMLOutputElement; }
-	interface HTMLParagraphElement{ append(...nodes: (Node | string)[]): HTMLParagraphElement; }
-	interface HTMLPictureElement{ append(...nodes: (Node | string)[]): HTMLPictureElement; }
-	interface HTMLPreElement{ append(...nodes: (Node | string)[]): HTMLPreElement; }
-	interface HTMLProgressElement{ append(...nodes: (Node | string)[]): HTMLProgressElement; }
-	interface HTMLQuoteElement{ append(...nodes: (Node | string)[]): HTMLQuoteElement; }
-	interface HTMLElement{ append(...nodes: (Node | string)[]): HTMLElement; }
-	interface HTMLElement{ append(...nodes: (Node | string)[]): HTMLElement; }
-	interface HTMLElement{ append(...nodes: (Node | string)[]): HTMLElement; }
-	interface HTMLElement{ append(...nodes: (Node | string)[]): HTMLElement; }
-	interface HTMLElement{ append(...nodes: (Node | string)[]): HTMLElement; }
-	interface HTMLScriptElement{ append(...nodes: (Node | string)[]): HTMLScriptElement; }
-	interface HTMLElement{ append(...nodes: (Node | string)[]): HTMLElement; }
-	interface HTMLSelectElement{ append(...nodes: (Node | string)[]): HTMLSelectElement; }
-	interface HTMLSlotElement{ append(...nodes: (Node | string)[]): HTMLSlotElement; }
-	interface HTMLElement{ append(...nodes: (Node | string)[]): HTMLElement; }
-	interface HTMLSourceElement{ append(...nodes: (Node | string)[]): HTMLSourceElement; }
-	interface HTMLSpanElement{ append(...nodes: (Node | string)[]): HTMLSpanElement; }
-	interface HTMLElement{ append(...nodes: (Node | string)[]): HTMLElement; }
-	interface HTMLStyleElement{ append(...nodes: (Node | string)[]): HTMLStyleElement; }
-	interface HTMLElement{ append(...nodes: (Node | string)[]): HTMLElement; }
-	interface HTMLElement{ append(...nodes: (Node | string)[]): HTMLElement; }
-	interface HTMLElement{ append(...nodes: (Node | string)[]): HTMLElement; }
-	interface HTMLTableElement{ append(...nodes: (Node | string)[]): HTMLTableElement; }
-	interface HTMLTableSectionElement{ append(...nodes: (Node | string)[]): HTMLTableSectionElement; }
-	interface HTMLTableCellElement{ append(...nodes: (Node | string)[]): HTMLTableCellElement; }
-	interface HTMLTemplateElement{ append(...nodes: (Node | string)[]): HTMLTemplateElement; }
-	interface HTMLTextAreaElement{ append(...nodes: (Node | string)[]): HTMLTextAreaElement; }
-	interface HTMLTableSectionElement{ append(...nodes: (Node | string)[]): HTMLTableSectionElement; }
-	interface HTMLTableCellElement{ append(...nodes: (Node | string)[]): HTMLTableCellElement; }
-	interface HTMLTableSectionElement{ append(...nodes: (Node | string)[]): HTMLTableSectionElement; }
-	interface HTMLTimeElement{ append(...nodes: (Node | string)[]): HTMLTimeElement; }
-	interface HTMLTitleElement{ append(...nodes: (Node | string)[]): HTMLTitleElement; }
-	interface HTMLTableRowElement{ append(...nodes: (Node | string)[]): HTMLTableRowElement; }
-	interface HTMLTrackElement{ append(...nodes: (Node | string)[]): HTMLTrackElement; }
-	interface HTMLElement{ append(...nodes: (Node | string)[]): HTMLElement; }
-	interface HTMLUListElement{ append(...nodes: (Node | string)[]): HTMLUListElement; }
-	interface HTMLElement{ append(...nodes: (Node | string)[]): HTMLElement; }
-	interface HTMLVideoElement{ append(...nodes: (Node | string)[]): HTMLVideoElement; }
-	interface HTMLElement{ append(...nodes: (Node | string)[]): HTMLElement; }
-	interface DocumentFragment{ append(...nodes: (Node | string)[]): DocumentFragment; }
+	interface HTMLAnchorElement{
+		/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
+		append: ddeAppend<HTMLAnchorElement>;
+	}
+	interface HTMLElement{
+		/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
+		append: ddeAppend<HTMLElement>;
+	}
+	interface HTMLAreaElement{
+		/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
+		append: ddeAppend<HTMLAreaElement>;
+	}
+	interface HTMLAudioElement{
+		/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
+		append: ddeAppend<HTMLAudioElement>;
+	}
+	interface HTMLBaseElement{
+		/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
+		append: ddeAppend<HTMLBaseElement>;
+	}
+	interface HTMLQuoteElement{
+		/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
+		append: ddeAppend<HTMLQuoteElement>;
+	}
+	interface HTMLBodyElement{
+		/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
+		append: ddeAppend<HTMLBodyElement>;
+	}
+	interface HTMLBRElement{
+		/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
+		append: ddeAppend<HTMLBRElement>;
+	}
+	interface HTMLButtonElement{
+		/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
+		append: ddeAppend<HTMLButtonElement>;
+	}
+	interface HTMLCanvasElement{
+		/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
+		append: ddeAppend<HTMLCanvasElement>;
+	}
+	interface HTMLTableCaptionElement{
+		/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
+		append: ddeAppend<HTMLTableCaptionElement>;
+	}
+	interface HTMLTableColElement{
+		/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
+		append: ddeAppend<HTMLTableColElement>;
+	}
+	interface HTMLTableColElement{
+		/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
+		append: ddeAppend<HTMLTableColElement>;
+	}
+	interface HTMLDataElement{
+		/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
+		append: ddeAppend<HTMLDataElement>;
+	}
+	interface HTMLDataListElement{
+		/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
+		append: ddeAppend<HTMLDataListElement>;
+	}
+	interface HTMLModElement{
+		/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
+		append: ddeAppend<HTMLModElement>;
+	}
+	interface HTMLDetailsElement{
+		/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
+		append: ddeAppend<HTMLDetailsElement>;
+	}
+	interface HTMLDialogElement{
+		/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
+		append: ddeAppend<HTMLDialogElement>;
+	}
+	interface HTMLDivElement{
+		/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
+		append: ddeAppend<HTMLDivElement>;
+	}
+	interface HTMLDListElement{
+		/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
+		append: ddeAppend<HTMLDListElement>;
+	}
+	interface HTMLEmbedElement{
+		/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
+		append: ddeAppend<HTMLEmbedElement>;
+	}
+	interface HTMLFieldSetElement{
+		/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
+		append: ddeAppend<HTMLFieldSetElement>;
+	}
+	interface HTMLFormElement{
+		/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
+		append: ddeAppend<HTMLFormElement>;
+	}
+	interface HTMLHeadingElement{
+		/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
+		append: ddeAppend<HTMLHeadingElement>;
+	}
+	interface HTMLHeadElement{
+		/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
+		append: ddeAppend<HTMLHeadElement>;
+	}
+	interface HTMLHRElement{
+		/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
+		append: ddeAppend<HTMLHRElement>;
+	}
+	interface HTMLHtmlElement{
+		/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
+		append: ddeAppend<HTMLHtmlElement>;
+	}
+	interface HTMLIFrameElement{
+		/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
+		append: ddeAppend<HTMLIFrameElement>;
+	}
+	interface HTMLImageElement{
+		/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
+		append: ddeAppend<HTMLImageElement>;
+	}
+	interface HTMLInputElement{
+		/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
+		append: ddeAppend<HTMLInputElement>;
+	}
+	interface HTMLLabelElement{
+		/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
+		append: ddeAppend<HTMLLabelElement>;
+	}
+	interface HTMLLegendElement{
+		/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
+		append: ddeAppend<HTMLLegendElement>;
+	}
+	interface HTMLLIElement{
+		/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
+		append: ddeAppend<HTMLLIElement>;
+	}
+	interface HTMLLinkElement{
+		/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
+		append: ddeAppend<HTMLLinkElement>;
+	}
+	interface HTMLMapElement{
+		/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
+		append: ddeAppend<HTMLMapElement>;
+	}
+	interface HTMLMenuElement{
+		/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
+		append: ddeAppend<HTMLMenuElement>;
+	}
+	interface HTMLMetaElement{
+		/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
+		append: ddeAppend<HTMLMetaElement>;
+	}
+	interface HTMLMeterElement{
+		/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
+		append: ddeAppend<HTMLMeterElement>;
+	}
+	interface HTMLObjectElement{
+		/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
+		append: ddeAppend<HTMLObjectElement>;
+	}
+	interface HTMLOListElement{
+		/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
+		append: ddeAppend<HTMLOListElement>;
+	}
+	interface HTMLOptGroupElement{
+		/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
+		append: ddeAppend<HTMLOptGroupElement>;
+	}
+	interface HTMLOptionElement{
+		/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
+		append: ddeAppend<HTMLOptionElement>;
+	}
+	interface HTMLOutputElement{
+		/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
+		append: ddeAppend<HTMLOutputElement>;
+	}
+	interface HTMLParagraphElement{
+		/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
+		append: ddeAppend<HTMLParagraphElement>;
+	}
+	interface HTMLPictureElement{
+		/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
+		append: ddeAppend<HTMLPictureElement>;
+	}
+	interface HTMLPreElement{
+		/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
+		append: ddeAppend<HTMLPreElement>;
+	}
+	interface HTMLProgressElement{
+		/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
+		append: ddeAppend<HTMLProgressElement>;
+	}
+	interface HTMLScriptElement{
+		/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
+		append: ddeAppend<HTMLScriptElement>;
+	}
+	interface HTMLSelectElement{
+		/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
+		append: ddeAppend<HTMLSelectElement>;
+	}
+	interface HTMLSlotElement{
+		/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
+		append: ddeAppend<HTMLSlotElement>;
+	}
+	interface HTMLSourceElement{
+		/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
+		append: ddeAppend<HTMLSourceElement>;
+	}
+	interface HTMLSpanElement{
+		/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
+		append: ddeAppend<HTMLSpanElement>;
+	}
+	interface HTMLStyleElement{
+		/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
+		append: ddeAppend<HTMLStyleElement>;
+	}
+	interface HTMLTableElement{
+		/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
+		append: ddeAppend<HTMLTableElement>;
+	}
+	interface HTMLTableSectionElement{
+		/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
+		append: ddeAppend<HTMLTableSectionElement>;
+	}
+	interface HTMLTableCellElement{
+		/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
+		append: ddeAppend<HTMLTableCellElement>;
+	}
+	interface HTMLTemplateElement{
+		/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
+		append: ddeAppend<HTMLTemplateElement>;
+	}
+	interface HTMLTextAreaElement{
+		/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
+		append: ddeAppend<HTMLTextAreaElement>;
+	}
+	interface HTMLTableCellElement{
+		/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
+		append: ddeAppend<HTMLTableCellElement>;
+	}
+	interface HTMLTimeElement{
+		/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
+		append: ddeAppend<HTMLTimeElement>;
+	}
+	interface HTMLTitleElement{
+		/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
+		append: ddeAppend<HTMLTitleElement>;
+	}
+	interface HTMLTableRowElement{
+		/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
+		append: ddeAppend<HTMLTableRowElement>;
+	}
+	interface HTMLTrackElement{
+		/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
+		append: ddeAppend<HTMLTrackElement>;
+	}
+	interface HTMLUListElement{
+		/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
+		append: ddeAppend<HTMLUListElement>;
+	}
+	interface HTMLVideoElement{
+		/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
+		append: ddeAppend<HTMLVideoElement>;
+	}
+	interface DocumentFragment{
+		/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
+		append: ddeAppend<DocumentFragment>;
+	}
 }
 export type Signal<V, A>= (set?: V)=> V & A;
 type Action<V>= (this: { value: V }, ...a: any[])=> typeof S._ | void;
@@ -237,6 +464,10 @@ interface S {
 	 *		by `S.clear`.
 	 * */
 	<V, A extends Actions<V>>(value: V, actions?: A): Signal<V, A>;
+	/**
+	 * Computations signal. This creates a signal which is computed from other signals.
+	 * */
+	<V>(computation: ()=> V): Signal<V, {}>
 	action<S extends Signal<any, Actions<any>>, A extends (S extends Signal<any, infer A> ? A : never), N extends keyof A>(
 		signal: S,
 		name: N,
@@ -248,7 +479,17 @@ interface S {
 		signal: SymbolSignal;
 		onclear: SymbolOnclear;
 	}
-	el<S extends any, T extends HTMLElement>(signal: Signal<S, any>, el: (v: S)=> T): T;
+	/**
+	 * Reactive element, which is rendered based on the given signal.
+	 * ```js
+	 * S.el(signal, value=> value ? el("b", "True") : el("i", "False"));
+	 * S.el(listS, list=> list.map(li=> el("li", li)));
+	 * ```
+	 * */
+	el<S extends any>(signal: Signal<S, any>, el: (v: S)=> Element | Element[]): DocumentFragment;
+
+	/** Mirrors element attributes for current host (both way).  */
+	attribute<T>(name: string, initial?: T): Signal<T, {}>
 }
 export const S: S;
 declare global {

dist/esm.d.ts

@@ -1,16 +1,23 @@
+type CustomElementTagNameMap= { '#text': Text, '#comment': Comment }
+declare global {
+	interface ddePublicElementTagNameMap{
+	}
+}
+type SupportedElement=
+	  HTMLElementTagNameMap[keyof HTMLElementTagNameMap]
+	| SVGElementTagNameMap[keyof SVGElementTagNameMap]
+	| MathMLElementTagNameMap[keyof MathMLElementTagNameMap]
+	| CustomElementTagNameMap[keyof CustomElementTagNameMap]
+	| ddePublicElementTagNameMap[keyof ddePublicElementTagNameMap];
 declare global {
 	type ddeComponentAttributes= Record<any, any> | undefined | string;
-	type ddeElementModifier<El extends HTMLElement | SVGElement | Comment | DocumentFragment>= (element: El)=> El;
+	type ddeElementModifier<El extends SupportedElement | DocumentFragment>= (element: El)=> El;
 }
-type ElementTagNameMap= HTMLElementTagNameMap & { // & SVGElementTagNameMap
-	'#text': Text
-}
-type Element= ElementTagNameMap[keyof ElementTagNameMap];
 type AttrsModified= {
 	/**
-	 * In fact argumen for `*.setAttribute("style", *)`.
+	 * Use string like in HTML (internally uses `*.setAttribute("style", *)`), or object representation (like DOM API).
 	 */
-	style: string
+	style: string | Partial<CSSStyleDeclaration>
 	/**
 	 * Provide option to add/remove/toggle CSS clasess (index of object) using 1/0/-1. In fact `el.classList.toggle(class_name)` for `-1` and `el.classList.toggle(class_name, Boolean(...))` for others.
 	 */
@@ -32,51 +39,81 @@ type AttrsModified= {
  * There is added support for `data[A-Z].*`/`aria[A-Z].*` to be converted to the kebab-case alternatives.
  * @private
  */
-type ElementAttributes<T extends keyof ElementTagNameMap | ElementTagNameMap[keyof ElementTagNameMap]>=
-	T extends keyof ElementTagNameMap ?
-	Omit<ElementTagNameMap[T],"classList"|"className"> & AttrsModified :
-	Omit<T,"classList"|"className"> & AttrsModified;
-export function assign<El extends Element>(element: El, ...attrs_array: Partial<ElementAttributes<El>>[]): El
-export function el<TAG extends keyof ElementTagNameMap>(
+type ElementAttributes<T extends SupportedElement>= Omit<T,keyof AttrsModified> & AttrsModified;
+export function assign<El extends SupportedElement>(element: El, ...attrs_array: Partial<ElementAttributes<El>>[]): El
+type ExtendedHTMLElementTagNameMap= HTMLElementTagNameMap & CustomElementTagNameMap & ddePublicElementTagNameMap
+export function el<TAG extends keyof ExtendedHTMLElementTagNameMap>(
 	tag_name: TAG,
-	attrs?: Partial<ElementAttributes<ElementTagNameMap[TAG]>>,
-	...modifiers: ddeElementModifier<ElementTagNameMap[TAG]>[]
-): ElementTagNameMap[TAG]
+	attrs?: string | Partial<ElementAttributes<ExtendedHTMLElementTagNameMap[TAG]>>,
+	...modifiers: ddeElementModifier<ExtendedHTMLElementTagNameMap[TAG]>[]
+): ExtendedHTMLElementTagNameMap[TAG]
 export function el<T>(
 	tag_name?: "<>",
 ): DocumentFragment
 export function el<
 	A extends ddeComponentAttributes,
-	C extends (attr: A)=> Element | DocumentFragment>(
+	C extends (attr: A)=> SupportedElement | DocumentFragment>(
 	fComponent: C,
 	attrs?: A,
 	...modifiers: ddeElementModifier<ReturnType<C>>[]
 ): ReturnType<C>
 export function el(
 	tag_name: string,
-	attrs?: Record<string, any>,
-	...modifiers: ddeElementModifier<HTMLElement | SVGElement>[]
+	attrs?: string | Record<string, any>,
+	...modifiers: ddeElementModifier<HTMLElement>[]
 ): HTMLElement
-export function dispatchEvent(element: HTMLElement, name: keyof DocumentEventMap): void;
-export function dispatchEvent(element: HTMLElement, name: string, data: any): void;
+export function elNS(
+	namespace: "http://www.w3.org/2000/svg"
+): <TAG extends keyof SVGElementTagNameMap, KEYS extends keyof SVGElementTagNameMap[TAG] & { d: string }>(
+	tag_name: TAG,
+	attrs?: string | Partial<{ [key in KEYS]: SVGElementTagNameMap[TAG][key] | string | number | boolean }>,
+	...modifiers: ddeElementModifier<SVGElementTagNameMap[TAG]>[]
+)=> SVGElementTagNameMap[TAG]
+export function elNS(
+	namespace: "http://www.w3.org/1998/Math/MathML"
+): <TAG extends keyof MathMLElementTagNameMap, KEYS extends keyof MathMLElementTagNameMap[TAG] & { d: string }>(
+	tag_name: TAG,
+	attrs?: string | Partial<{ [key in KEYS]: MathMLElementTagNameMap[TAG][key] | string | number | boolean }>,
+	...modifiers: ddeElementModifier<MathMLElementTagNameMap[TAG]>[]
+)=> MathMLElementTagNameMap[TAG]
+export function elNS(
+	namespace: string
+): (
+	tag_name: string,
+	attrs?: string | Record<string, any>,
+	...modifiers: ddeElementModifier<SupportedElement>[]
+)=> SupportedElement
+export function dispatchEvent(element: SupportedElement, name: keyof DocumentEventMap): void;
+export function dispatchEvent(element: SupportedElement, name: string, data: any): void;
 interface On{
+	/** Listens to the DOM event. See {@link Document.addEventListener} */
 	<
-		EE extends ddeElementModifier<Element>,
+		EE extends ddeElementModifier<SupportedElement>,
 		El extends ( EE extends ddeElementModifier<infer El> ? El : never ),
 		Event extends keyof DocumentEventMap>(
 			type: Event,
 			listener: (this: El, ev: DocumentEventMap[Event]) => any,
 			options?: AddEventListenerOptions
 		) : EE;
+	/** Listens to the element is connected to the live DOM. In case of custom elements uses [`connectedCallback`](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements#custom_element_lifecycle_callbacks), or {@link MutationObserver} else where */
 	connected<
-		EE extends ddeElementModifier<Element>,
+		EE extends ddeElementModifier<SupportedElement>,
 		El extends ( EE extends ddeElementModifier<infer El> ? El : never )
 		>(
 			listener: (el: El) => any,
 			options?: AddEventListenerOptions
 		) : EE;
+	/** Listens to the element is disconnected from the live DOM. In case of custom elements uses [`disconnectedCallback`](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements#custom_element_lifecycle_callbacks), or {@link MutationObserver} else where */
 	disconnected<
-		EE extends ddeElementModifier<Element>,
+		EE extends ddeElementModifier<SupportedElement>,
+		El extends ( EE extends ddeElementModifier<infer El> ? El : never )
+		>(
+			listener: (el: El) => any,
+			options?: AddEventListenerOptions
+		) : EE;
+	/** Listens to the element attribute changes. In case of custom elements uses [`attributeChangedCallback`](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements#custom_element_lifecycle_callbacks), or {@link MutationObserver} else where */
+	attributeChanged<
+		EE extends ddeElementModifier<SupportedElement>,
 		El extends ( EE extends ddeElementModifier<infer El> ? El : never )
 		>(
 			listener: (el: El) => any,
@@ -84,124 +121,314 @@ interface On{
 		) : EE;
 }
 export const on: On;
+type Scope= { scope: Node | Function | Object, host: ddeElementModifier<any>, prevent: boolean, inherit_host: boolean, }
+/** Current scope created last time the `el(Function)` was invoke. (Or {@link scope.push}) */
 export const scope: {
-	namespace: string,
+	current: Scope,
+	/** Stops all automatizations. E. g. signals used as attributes in current scope
+	 * registers removing these listeners (and clean signal if no other listeners are detected)
+	 * on `disconnected` event. */
+	preventDefault<T extends boolean>(prevent: T): T,
+	/**
+	 * This represents reference to the current host element — `scope.host()`.
+	 * It can be also used to register Modifier (function to be called when component is initized)
+	 * — `scope.host(on.connected(console.log))`.
+	 * */
 	host: ddeElementModifier<any>,
-	elNamespace: (ns: string)=> ({ append(...els: (HTMLElement | SVGElement)[]): HTMLElement | SVGElement | DocumentFragment })
+	
+	state: Scope[],
+	/** Adds new child scope. All attributes are inherited by default. */
+	push(scope: Partial<Scope>): ReturnType<Array<Scope>["push"]>,
+	/** Removes last/current child scope. */
+	pop(): ReturnType<Array<Scope>["pop"]>,
 };
-//TODO for SVG
+/*
+ * TODO TypeScript HACK (better way?)
+ * this doesnt works
+ * ```ts
+ * interface element<el> extends Node{
+ * 	prototype: el;
+ * 	append(...els: (SupportedElement | DocumentFragment | string | element<SupportedElement | DocumentFragment>)[]): el
+ * }
+ * export function el<T>(
+ * 	tag_name?: "<>",
+ * ): element<DocumentFragment>
+ * ```
+ * …as its complains here
+ * ```ts
+ * const d= el("div");
+ * const f= (a: HTMLDivElement)=> a;
+ * f(d); //←
+ * document.head.append( //←
+ * 	el("script", { src: "https://flems.io/flems.html", type: "text/javascript", charset: "utf-8" }),
+ * );
+ * ```
+ * TODO for SVG
+ * */
+type ddeAppend<el>= (...nodes: (Node | string)[])=> el;
 declare global{
-	interface HTMLDivElement{ append(...nodes: (Node | string)[]): HTMLDivElement; }
-	interface HTMLAnchorElement{ append(...nodes: (Node | string)[]): HTMLAnchorElement; }
-	interface HTMLElement{ append(...nodes: (Node | string)[]): HTMLElement; }
-	interface HTMLElement{ append(...nodes: (Node | string)[]): HTMLElement; }
-	interface HTMLAreaElement{ append(...nodes: (Node | string)[]): HTMLAreaElement; }
-	interface HTMLElement{ append(...nodes: (Node | string)[]): HTMLElement; }
-	interface HTMLElement{ append(...nodes: (Node | string)[]): HTMLElement; }
-	interface HTMLAudioElement{ append(...nodes: (Node | string)[]): HTMLAudioElement; }
-	interface HTMLElement{ append(...nodes: (Node | string)[]): HTMLElement; }
-	interface HTMLBaseElement{ append(...nodes: (Node | string)[]): HTMLBaseElement; }
-	interface HTMLElement{ append(...nodes: (Node | string)[]): HTMLElement; }
-	interface HTMLElement{ append(...nodes: (Node | string)[]): HTMLElement; }
-	interface HTMLQuoteElement{ append(...nodes: (Node | string)[]): HTMLQuoteElement; }
-	interface HTMLBodyElement{ append(...nodes: (Node | string)[]): HTMLBodyElement; }
-	interface HTMLBRElement{ append(...nodes: (Node | string)[]): HTMLBRElement; }
-	interface HTMLButtonElement{ append(...nodes: (Node | string)[]): HTMLButtonElement; }
-	interface HTMLCanvasElement{ append(...nodes: (Node | string)[]): HTMLCanvasElement; }
-	interface HTMLTableCaptionElement{ append(...nodes: (Node | string)[]): HTMLTableCaptionElement; }
-	interface HTMLElement{ append(...nodes: (Node | string)[]): HTMLElement; }
-	interface HTMLElement{ append(...nodes: (Node | string)[]): HTMLElement; }
-	interface HTMLTableColElement{ append(...nodes: (Node | string)[]): HTMLTableColElement; }
-	interface HTMLTableColElement{ append(...nodes: (Node | string)[]): HTMLTableColElement; }
-	interface HTMLDataElement{ append(...nodes: (Node | string)[]): HTMLDataElement; }
-	interface HTMLDataListElement{ append(...nodes: (Node | string)[]): HTMLDataListElement; }
-	interface HTMLElement{ append(...nodes: (Node | string)[]): HTMLElement; }
-	interface HTMLModElement{ append(...nodes: (Node | string)[]): HTMLModElement; }
-	interface HTMLDetailsElement{ append(...nodes: (Node | string)[]): HTMLDetailsElement; }
-	interface HTMLElement{ append(...nodes: (Node | string)[]): HTMLElement; }
-	interface HTMLDialogElement{ append(...nodes: (Node | string)[]): HTMLDialogElement; }
-	interface HTMLDivElement{ append(...nodes: (Node | string)[]): HTMLDivElement; }
-	interface HTMLDListElement{ append(...nodes: (Node | string)[]): HTMLDListElement; }
-	interface HTMLElement{ append(...nodes: (Node | string)[]): HTMLElement; }
-	interface HTMLElement{ append(...nodes: (Node | string)[]): HTMLElement; }
-	interface HTMLEmbedElement{ append(...nodes: (Node | string)[]): HTMLEmbedElement; }
-	interface HTMLFieldSetElement{ append(...nodes: (Node | string)[]): HTMLFieldSetElement; }
-	interface HTMLElement{ append(...nodes: (Node | string)[]): HTMLElement; }
-	interface HTMLElement{ append(...nodes: (Node | string)[]): HTMLElement; }
-	interface HTMLElement{ append(...nodes: (Node | string)[]): HTMLElement; }
-	interface HTMLFormElement{ append(...nodes: (Node | string)[]): HTMLFormElement; }
-	interface HTMLHeadingElement{ append(...nodes: (Node | string)[]): HTMLHeadingElement; }
-	interface HTMLHeadingElement{ append(...nodes: (Node | string)[]): HTMLHeadingElement; }
-	interface HTMLHeadingElement{ append(...nodes: (Node | string)[]): HTMLHeadingElement; }
-	interface HTMLHeadingElement{ append(...nodes: (Node | string)[]): HTMLHeadingElement; }
-	interface HTMLHeadingElement{ append(...nodes: (Node | string)[]): HTMLHeadingElement; }
-	interface HTMLHeadingElement{ append(...nodes: (Node | string)[]): HTMLHeadingElement; }
-	interface HTMLHeadElement{ append(...nodes: (Node | string)[]): HTMLHeadElement; }
-	interface HTMLElement{ append(...nodes: (Node | string)[]): HTMLElement; }
-	interface HTMLElement{ append(...nodes: (Node | string)[]): HTMLElement; }
-	interface HTMLHRElement{ append(...nodes: (Node | string)[]): HTMLHRElement; }
-	interface HTMLHtmlElement{ append(...nodes: (Node | string)[]): HTMLHtmlElement; }
-	interface HTMLElement{ append(...nodes: (Node | string)[]): HTMLElement; }
-	interface HTMLIFrameElement{ append(...nodes: (Node | string)[]): HTMLIFrameElement; }
-	interface HTMLImageElement{ append(...nodes: (Node | string)[]): HTMLImageElement; }
-	interface HTMLInputElement{ append(...nodes: (Node | string)[]): HTMLInputElement; }
-	interface HTMLModElement{ append(...nodes: (Node | string)[]): HTMLModElement; }
-	interface HTMLElement{ append(...nodes: (Node | string)[]): HTMLElement; }
-	interface HTMLLabelElement{ append(...nodes: (Node | string)[]): HTMLLabelElement; }
-	interface HTMLLegendElement{ append(...nodes: (Node | string)[]): HTMLLegendElement; }
-	interface HTMLLIElement{ append(...nodes: (Node | string)[]): HTMLLIElement; }
-	interface HTMLLinkElement{ append(...nodes: (Node | string)[]): HTMLLinkElement; }
-	interface HTMLElement{ append(...nodes: (Node | string)[]): HTMLElement; }
-	interface HTMLMapElement{ append(...nodes: (Node | string)[]): HTMLMapElement; }
-	interface HTMLElement{ append(...nodes: (Node | string)[]): HTMLElement; }
-	interface HTMLMenuElement{ append(...nodes: (Node | string)[]): HTMLMenuElement; }
-	interface HTMLMetaElement{ append(...nodes: (Node | string)[]): HTMLMetaElement; }
-	interface HTMLMeterElement{ append(...nodes: (Node | string)[]): HTMLMeterElement; }
-	interface HTMLElement{ append(...nodes: (Node | string)[]): HTMLElement; }
-	interface HTMLElement{ append(...nodes: (Node | string)[]): HTMLElement; }
-	interface HTMLObjectElement{ append(...nodes: (Node | string)[]): HTMLObjectElement; }
-	interface HTMLOListElement{ append(...nodes: (Node | string)[]): HTMLOListElement; }
-	interface HTMLOptGroupElement{ append(...nodes: (Node | string)[]): HTMLOptGroupElement; }
-	interface HTMLOptionElement{ append(...nodes: (Node | string)[]): HTMLOptionElement; }
-	interface HTMLOutputElement{ append(...nodes: (Node | string)[]): HTMLOutputElement; }
-	interface HTMLParagraphElement{ append(...nodes: (Node | string)[]): HTMLParagraphElement; }
-	interface HTMLPictureElement{ append(...nodes: (Node | string)[]): HTMLPictureElement; }
-	interface HTMLPreElement{ append(...nodes: (Node | string)[]): HTMLPreElement; }
-	interface HTMLProgressElement{ append(...nodes: (Node | string)[]): HTMLProgressElement; }
-	interface HTMLQuoteElement{ append(...nodes: (Node | string)[]): HTMLQuoteElement; }
-	interface HTMLElement{ append(...nodes: (Node | string)[]): HTMLElement; }
-	interface HTMLElement{ append(...nodes: (Node | string)[]): HTMLElement; }
-	interface HTMLElement{ append(...nodes: (Node | string)[]): HTMLElement; }
-	interface HTMLElement{ append(...nodes: (Node | string)[]): HTMLElement; }
-	interface HTMLElement{ append(...nodes: (Node | string)[]): HTMLElement; }
-	interface HTMLScriptElement{ append(...nodes: (Node | string)[]): HTMLScriptElement; }
-	interface HTMLElement{ append(...nodes: (Node | string)[]): HTMLElement; }
-	interface HTMLSelectElement{ append(...nodes: (Node | string)[]): HTMLSelectElement; }
-	interface HTMLSlotElement{ append(...nodes: (Node | string)[]): HTMLSlotElement; }
-	interface HTMLElement{ append(...nodes: (Node | string)[]): HTMLElement; }
-	interface HTMLSourceElement{ append(...nodes: (Node | string)[]): HTMLSourceElement; }
-	interface HTMLSpanElement{ append(...nodes: (Node | string)[]): HTMLSpanElement; }
-	interface HTMLElement{ append(...nodes: (Node | string)[]): HTMLElement; }
-	interface HTMLStyleElement{ append(...nodes: (Node | string)[]): HTMLStyleElement; }
-	interface HTMLElement{ append(...nodes: (Node | string)[]): HTMLElement; }
-	interface HTMLElement{ append(...nodes: (Node | string)[]): HTMLElement; }
-	interface HTMLElement{ append(...nodes: (Node | string)[]): HTMLElement; }
-	interface HTMLTableElement{ append(...nodes: (Node | string)[]): HTMLTableElement; }
-	interface HTMLTableSectionElement{ append(...nodes: (Node | string)[]): HTMLTableSectionElement; }
-	interface HTMLTableCellElement{ append(...nodes: (Node | string)[]): HTMLTableCellElement; }
-	interface HTMLTemplateElement{ append(...nodes: (Node | string)[]): HTMLTemplateElement; }
-	interface HTMLTextAreaElement{ append(...nodes: (Node | string)[]): HTMLTextAreaElement; }
-	interface HTMLTableSectionElement{ append(...nodes: (Node | string)[]): HTMLTableSectionElement; }
-	interface HTMLTableCellElement{ append(...nodes: (Node | string)[]): HTMLTableCellElement; }
-	interface HTMLTableSectionElement{ append(...nodes: (Node | string)[]): HTMLTableSectionElement; }
-	interface HTMLTimeElement{ append(...nodes: (Node | string)[]): HTMLTimeElement; }
-	interface HTMLTitleElement{ append(...nodes: (Node | string)[]): HTMLTitleElement; }
-	interface HTMLTableRowElement{ append(...nodes: (Node | string)[]): HTMLTableRowElement; }
-	interface HTMLTrackElement{ append(...nodes: (Node | string)[]): HTMLTrackElement; }
-	interface HTMLElement{ append(...nodes: (Node | string)[]): HTMLElement; }
-	interface HTMLUListElement{ append(...nodes: (Node | string)[]): HTMLUListElement; }
-	interface HTMLElement{ append(...nodes: (Node | string)[]): HTMLElement; }
-	interface HTMLVideoElement{ append(...nodes: (Node | string)[]): HTMLVideoElement; }
-	interface HTMLElement{ append(...nodes: (Node | string)[]): HTMLElement; }
-	interface DocumentFragment{ append(...nodes: (Node | string)[]): DocumentFragment; }
+	interface HTMLAnchorElement{
+		/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
+		append: ddeAppend<HTMLAnchorElement>;
+	}
+	interface HTMLElement{
+		/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
+		append: ddeAppend<HTMLElement>;
+	}
+	interface HTMLAreaElement{
+		/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
+		append: ddeAppend<HTMLAreaElement>;
+	}
+	interface HTMLAudioElement{
+		/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
+		append: ddeAppend<HTMLAudioElement>;
+	}
+	interface HTMLBaseElement{
+		/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
+		append: ddeAppend<HTMLBaseElement>;
+	}
+	interface HTMLQuoteElement{
+		/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
+		append: ddeAppend<HTMLQuoteElement>;
+	}
+	interface HTMLBodyElement{
+		/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
+		append: ddeAppend<HTMLBodyElement>;
+	}
+	interface HTMLBRElement{
+		/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
+		append: ddeAppend<HTMLBRElement>;
+	}
+	interface HTMLButtonElement{
+		/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
+		append: ddeAppend<HTMLButtonElement>;
+	}
+	interface HTMLCanvasElement{
+		/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
+		append: ddeAppend<HTMLCanvasElement>;
+	}
+	interface HTMLTableCaptionElement{
+		/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
+		append: ddeAppend<HTMLTableCaptionElement>;
+	}
+	interface HTMLTableColElement{
+		/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
+		append: ddeAppend<HTMLTableColElement>;
+	}
+	interface HTMLTableColElement{
+		/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
+		append: ddeAppend<HTMLTableColElement>;
+	}
+	interface HTMLDataElement{
+		/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
+		append: ddeAppend<HTMLDataElement>;
+	}
+	interface HTMLDataListElement{
+		/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
+		append: ddeAppend<HTMLDataListElement>;
+	}
+	interface HTMLModElement{
+		/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
+		append: ddeAppend<HTMLModElement>;
+	}
+	interface HTMLDetailsElement{
+		/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
+		append: ddeAppend<HTMLDetailsElement>;
+	}
+	interface HTMLDialogElement{
+		/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
+		append: ddeAppend<HTMLDialogElement>;
+	}
+	interface HTMLDivElement{
+		/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
+		append: ddeAppend<HTMLDivElement>;
+	}
+	interface HTMLDListElement{
+		/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
+		append: ddeAppend<HTMLDListElement>;
+	}
+	interface HTMLEmbedElement{
+		/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
+		append: ddeAppend<HTMLEmbedElement>;
+	}
+	interface HTMLFieldSetElement{
+		/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
+		append: ddeAppend<HTMLFieldSetElement>;
+	}
+	interface HTMLFormElement{
+		/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
+		append: ddeAppend<HTMLFormElement>;
+	}
+	interface HTMLHeadingElement{
+		/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
+		append: ddeAppend<HTMLHeadingElement>;
+	}
+	interface HTMLHeadElement{
+		/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
+		append: ddeAppend<HTMLHeadElement>;
+	}
+	interface HTMLHRElement{
+		/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
+		append: ddeAppend<HTMLHRElement>;
+	}
+	interface HTMLHtmlElement{
+		/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
+		append: ddeAppend<HTMLHtmlElement>;
+	}
+	interface HTMLIFrameElement{
+		/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
+		append: ddeAppend<HTMLIFrameElement>;
+	}
+	interface HTMLImageElement{
+		/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
+		append: ddeAppend<HTMLImageElement>;
+	}
+	interface HTMLInputElement{
+		/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
+		append: ddeAppend<HTMLInputElement>;
+	}
+	interface HTMLLabelElement{
+		/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
+		append: ddeAppend<HTMLLabelElement>;
+	}
+	interface HTMLLegendElement{
+		/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
+		append: ddeAppend<HTMLLegendElement>;
+	}
+	interface HTMLLIElement{
+		/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
+		append: ddeAppend<HTMLLIElement>;
+	}
+	interface HTMLLinkElement{
+		/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
+		append: ddeAppend<HTMLLinkElement>;
+	}
+	interface HTMLMapElement{
+		/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
+		append: ddeAppend<HTMLMapElement>;
+	}
+	interface HTMLMenuElement{
+		/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
+		append: ddeAppend<HTMLMenuElement>;
+	}
+	interface HTMLMetaElement{
+		/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
+		append: ddeAppend<HTMLMetaElement>;
+	}
+	interface HTMLMeterElement{
+		/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
+		append: ddeAppend<HTMLMeterElement>;
+	}
+	interface HTMLObjectElement{
+		/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
+		append: ddeAppend<HTMLObjectElement>;
+	}
+	interface HTMLOListElement{
+		/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
+		append: ddeAppend<HTMLOListElement>;
+	}
+	interface HTMLOptGroupElement{
+		/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
+		append: ddeAppend<HTMLOptGroupElement>;
+	}
+	interface HTMLOptionElement{
+		/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
+		append: ddeAppend<HTMLOptionElement>;
+	}
+	interface HTMLOutputElement{
+		/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
+		append: ddeAppend<HTMLOutputElement>;
+	}
+	interface HTMLParagraphElement{
+		/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
+		append: ddeAppend<HTMLParagraphElement>;
+	}
+	interface HTMLPictureElement{
+		/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
+		append: ddeAppend<HTMLPictureElement>;
+	}
+	interface HTMLPreElement{
+		/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
+		append: ddeAppend<HTMLPreElement>;
+	}
+	interface HTMLProgressElement{
+		/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
+		append: ddeAppend<HTMLProgressElement>;
+	}
+	interface HTMLScriptElement{
+		/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
+		append: ddeAppend<HTMLScriptElement>;
+	}
+	interface HTMLSelectElement{
+		/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
+		append: ddeAppend<HTMLSelectElement>;
+	}
+	interface HTMLSlotElement{
+		/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
+		append: ddeAppend<HTMLSlotElement>;
+	}
+	interface HTMLSourceElement{
+		/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
+		append: ddeAppend<HTMLSourceElement>;
+	}
+	interface HTMLSpanElement{
+		/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
+		append: ddeAppend<HTMLSpanElement>;
+	}
+	interface HTMLStyleElement{
+		/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
+		append: ddeAppend<HTMLStyleElement>;
+	}
+	interface HTMLTableElement{
+		/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
+		append: ddeAppend<HTMLTableElement>;
+	}
+	interface HTMLTableSectionElement{
+		/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
+		append: ddeAppend<HTMLTableSectionElement>;
+	}
+	interface HTMLTableCellElement{
+		/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
+		append: ddeAppend<HTMLTableCellElement>;
+	}
+	interface HTMLTemplateElement{
+		/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
+		append: ddeAppend<HTMLTemplateElement>;
+	}
+	interface HTMLTextAreaElement{
+		/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
+		append: ddeAppend<HTMLTextAreaElement>;
+	}
+	interface HTMLTableCellElement{
+		/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
+		append: ddeAppend<HTMLTableCellElement>;
+	}
+	interface HTMLTimeElement{
+		/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
+		append: ddeAppend<HTMLTimeElement>;
+	}
+	interface HTMLTitleElement{
+		/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
+		append: ddeAppend<HTMLTitleElement>;
+	}
+	interface HTMLTableRowElement{
+		/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
+		append: ddeAppend<HTMLTableRowElement>;
+	}
+	interface HTMLTrackElement{
+		/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
+		append: ddeAppend<HTMLTrackElement>;
+	}
+	interface HTMLUListElement{
+		/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
+		append: ddeAppend<HTMLUListElement>;
+	}
+	interface HTMLVideoElement{
+		/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
+		append: ddeAppend<HTMLVideoElement>;
+	}
+	interface DocumentFragment{
+		/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
+		append: ddeAppend<DocumentFragment>;
+	}
 }

docs/elements.html

@@ -1,4 +1,4 @@
-<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="elements.css"><meta name="description" content="Basic concepts of elements modifications and creations."><!--<dde:mark type="component" name="metaTwitter" host="this"/>--><meta name="twitter:card" content="summary_large_image"><meta name="twitter:url" content="https://github.com/jaandrle/deka-dom-el"><meta name="twitter:title" content="deka-dom-el"><meta name="twitter:description" content="A low-code library that simplifies the creation of native DOM elements/components using small wrappers and tweaks."><meta name="twitter:creator" content="@jaandrle"><!--<dde:mark type="component" name="metaFacebook" host="this"/>--><meta name="og:url" content="https://github.com/jaandrle/deka-dom-el"><meta name="og:title" content="deka-dom-el"><meta name="og:description" content="A low-code library that simplifies the creation of native DOM elements/components using small wrappers and tweaks."><meta name="og:creator" content="@jaandrle"><title>`deka-dom-el` — Elements</title><script src="https://flems.io/flems.html" type="text/javascript" charset="utf-8"></script></head><body><!--<dde:mark type="component" name="page" host="this"/>--><!--<dde:mark type="component" name="header" host="this"/>--><header><h1>`deka-dom-el` — Elements</h1><p>Basic concepts of elements modifications and creations.</p></header><nav><a href="https://github.com/jaandrle/deka-dom-el"><svg class="icon" viewBox="0 0 32 32"><!--<dde:mark type="component" name="iconGitHub" host="parentElement"/>--><path d="M 16,0.395c -8.836,0 -16,7.163 -16,16c 0,7.069 4.585,13.067 10.942,15.182c 0.8,0.148 1.094,-0.347 1.094,-0.77c 0,-0.381 -0.015,-1.642 -0.022,-2.979c -4.452,0.968 -5.391,-1.888 -5.391,-1.888c -0.728,-1.849 -1.776,-2.341 -1.776,-2.341c -1.452,-0.993 0.11,-0.973 0.11,-0.973c 1.606,0.113 2.452,1.649 2.452,1.649c 1.427,2.446 3.743,1.739 4.656,1.33c 0.143,-1.034 0.558,-1.74 1.016,-2.14c -3.554,-0.404 -7.29,-1.777 -7.29,-7.907c 0,-1.747 0.625,-3.174 1.649,-4.295c -0.166,-0.403 -0.714,-2.03 0.155,-4.234c 0,0 1.344,-0.43 4.401,1.64c 1.276,-0.355 2.645,-0.532 4.005,-0.539c 1.359,0.006 2.729,0.184 4.008,0.539c 3.054,-2.07 4.395,-1.64 4.395,-1.64c 0.871,2.204 0.323,3.831 0.157,4.234c 1.026,1.12 1.647,2.548 1.647,4.295c 0,6.145 -3.743,7.498 -7.306,7.895c 0.574,0.497 1.085,1.47 1.085,2.963c 0,2.141 -0.019,3.864 -0.019,4.391c 0,0.426 0.288,0.925 1.099,0.768c 6.354,-2.118 10.933,-8.113 10.933,-15.18c 0,-8.837 -7.164,-16 -16,-16Z"></path></svg>GitHub</a><a href="./" title="Introducing a&nbsp;library and motivations.">1. Introduction</a><a href="elements" title="Basic concepts of elements modifications and creations." class="current">2. Elements</a></nav><main><h2>Native JavaScript DOM elements creations</h2><p>Let’s go through all patterns we would like to use and what needs to be improved for better experience.</p><h3>Creating element(s) (with custom attributes)</h3><p>You can create a native DOM element by using the <a href="https://developer.mozilla.org/en-US/docs/Web/API/Document/createElement" title="MDN documentation for document.createElement()"><code>document.createElement()</code></a>. It is also possible to provide a&nbsp;some attribute(s) declaratively using <code>Object.assign()</code>. More precisely, this way you can sets some <a href="https://developer.mozilla.org/en-US/docs/Glossary/IDL" title="MDN page about Interface Description Language"><abbr title="Interface Description Language">IDL</abbr></a>.</p><!--<dde:mark type="component" name="example" host="this"/>--><div id="code-kryno" class="example"><pre><code class="language-javascript">document.body.append(
+<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="elements.css"><meta name="description" content="Basic concepts of elements modifications and creations."><!--<dde:mark type="component" name="metaTwitter" host="this"/>--><meta name="twitter:card" content="summary_large_image"><meta name="twitter:url" content="https://github.com/jaandrle/deka-dom-el"><meta name="twitter:title" content="deka-dom-el"><meta name="twitter:description" content="A low-code library that simplifies the creation of native DOM elements/components using small wrappers and tweaks."><meta name="twitter:creator" content="@jaandrle"><!--<dde:mark type="component" name="metaFacebook" host="this"/>--><meta name="og:url" content="https://github.com/jaandrle/deka-dom-el"><meta name="og:title" content="deka-dom-el"><meta name="og:description" content="A low-code library that simplifies the creation of native DOM elements/components using small wrappers and tweaks."><meta name="og:creator" content="@jaandrle"><title>`deka-dom-el` — Elements</title><script src="https://flems.io/flems.html" type="text/javascript" charset="utf-8"></script></head><body><!--<dde:mark type="component" name="page" host="this"/>--><!--<dde:mark type="component" name="header" host="this"/>--><header><h1>`deka-dom-el` — Elements</h1><p>Basic concepts of elements modifications and creations.</p></header><nav><a href="https://github.com/jaandrle/deka-dom-el"><svg class="icon" viewbox="0 0 32 32"><!--<dde:mark type="component" name="iconGitHub" host="parentElement"/>--><path d="M 16,0.395c -8.836,0 -16,7.163 -16,16c 0,7.069 4.585,13.067 10.942,15.182c 0.8,0.148 1.094,-0.347 1.094,-0.77c 0,-0.381 -0.015,-1.642 -0.022,-2.979c -4.452,0.968 -5.391,-1.888 -5.391,-1.888c -0.728,-1.849 -1.776,-2.341 -1.776,-2.341c -1.452,-0.993 0.11,-0.973 0.11,-0.973c 1.606,0.113 2.452,1.649 2.452,1.649c 1.427,2.446 3.743,1.739 4.656,1.33c 0.143,-1.034 0.558,-1.74 1.016,-2.14c -3.554,-0.404 -7.29,-1.777 -7.29,-7.907c 0,-1.747 0.625,-3.174 1.649,-4.295c -0.166,-0.403 -0.714,-2.03 0.155,-4.234c 0,0 1.344,-0.43 4.401,1.64c 1.276,-0.355 2.645,-0.532 4.005,-0.539c 1.359,0.006 2.729,0.184 4.008,0.539c 3.054,-2.07 4.395,-1.64 4.395,-1.64c 0.871,2.204 0.323,3.831 0.157,4.234c 1.026,1.12 1.647,2.548 1.647,4.295c 0,6.145 -3.743,7.498 -7.306,7.895c 0.574,0.497 1.085,1.47 1.085,2.963c 0,2.141 -0.019,3.864 -0.019,4.391c 0,0.426 0.288,0.925 1.099,0.768c 6.354,-2.118 10.933,-8.113 10.933,-15.18c 0,-8.837 -7.164,-16 -16,-16Z"></path></svg>GitHub</a><a href="./" title="Introducing a&nbsp;library and motivations.">1. Introduction</a><a href="elements" title="Basic concepts of elements modifications and creations." class="current">2. Elements</a></nav><main><h2>Native JavaScript DOM elements creations</h2><p>Let’s go through all patterns we would like to use and what needs to be improved for better experience.</p><h3>Creating element(s) (with custom attributes)</h3><p>You can create a native DOM element by using the <a href="https://developer.mozilla.org/en-US/docs/Web/API/Document/createElement" title="MDN documentation for document.createElement()"><code>document.createElement()</code></a>. It is also possible to provide a&nbsp;some attribute(s) declaratively using <code>Object.assign()</code>. More precisely, this way you can sets some <a href="https://developer.mozilla.org/en-US/docs/Glossary/IDL" title="MDN page about Interface Description Language"><abbr title="Interface Description Language">IDL</abbr></a>.</p><!--<dde:mark type="component" name="example" host="this"/>--><div id="code-m4hdt" class="example"><pre><code class="language-javascript">document.body.append(
 	document.createElement("div")
 );
 console.log(
@@ -12,7 +12,7 @@ document.body.append(
 		{ textContent: "Element’s text content.", style: "color: coral;" }
 	)
 );
-</code></pre></div><script>Flems(document.getElementById("code-kryno"), JSON.parse("{\"files\":[{\"name\":\".js\",\"content\":\"document.body.append(\\n\\tdocument.createElement(\\\"div\\\")\\n);\\nconsole.log(\\n\\t\\\"Emty div is generated inside <body>:\\\",\\n\\tdocument.body.innerHTML.includes(\\\"<div></div>\\\")\\n);\\n\\ndocument.body.append(\\n\\tObject.assign(\\n\\t\\tdocument.createElement(\\\"p\\\"),\\n\\t\\t{ textContent: \\\"Element’s text content.\\\", style: \\\"color: coral;\\\" }\\n\\t)\\n);\\n\"}],\"toolbar\":false}"));</script><p>To make this easier, you can use the <code>el</code> function. Internally in basic examples, it is wrapper around <code>assign(document.createElement(…), { … })</code>.</p><!--<dde:mark type="component" name="example" host="this"/>--><div id="code-180ua" class="example"><pre><code class="language-javascript">import { el, assign } from "https://cdn.jsdelivr.net/gh/jaandrle/deka-dom-el/dist/esm-with-signals.js";
+</code></pre></div><script>Flems(document.getElementById("code-m4hdt"), JSON.parse("{\"files\":[{\"name\":\".js\",\"content\":\"document.body.append(\\n\\tdocument.createElement(\\\"div\\\")\\n);\\nconsole.log(\\n\\t\\\"Emty div is generated inside <body>:\\\",\\n\\tdocument.body.innerHTML.includes(\\\"<div></div>\\\")\\n);\\n\\ndocument.body.append(\\n\\tObject.assign(\\n\\t\\tdocument.createElement(\\\"p\\\"),\\n\\t\\t{ textContent: \\\"Element’s text content.\\\", style: \\\"color: coral;\\\" }\\n\\t)\\n);\\n\"}],\"toolbar\":false}"));</script><p>To make this easier, you can use the <code>el</code> function. Internally in basic examples, it is wrapper around <code>assign(document.createElement(…), { … })</code>.</p><!--<dde:mark type="component" name="example" host="this"/>--><div id="code-5855d" class="example"><pre><code class="language-javascript">import { el, assign } from "https://cdn.jsdelivr.net/gh/jaandrle/deka-dom-el/dist/esm-with-signals.js";
 const color= "lightcoral";
 document.body.append(
 	el("p", { textContent: "Hello (first time)", style: { color } })
@@ -23,7 +23,7 @@ document.body.append(
 		{ textContent: "Hello (second time)", style: { color } }
 	)
 );
-</code></pre></div><script>Flems(document.getElementById("code-180ua"), JSON.parse("{\"files\":[{\"name\":\".js\",\"content\":\"import { el, assign } from \\\"https://cdn.jsdelivr.net/gh/jaandrle/deka-dom-el/dist/esm-with-signals.js\\\";\\nconst color= \\\"lightcoral\\\";\\ndocument.body.append(\\n\\tel(\\\"p\\\", { textContent: \\\"Hello (first time)\\\", style: { color } })\\n);\\ndocument.body.append(\\n\\tassign(\\n\\t\\tdocument.createElement(\\\"p\\\"),\\n\\t\\t{ textContent: \\\"Hello (second time)\\\", style: { color } }\\n\\t)\\n);\\n\"}],\"toolbar\":false}"));</script><p>The <code>assign</code> function provides improved behaviour of <code>Object.assign()</code>. You can declaratively sets any IDL and attribute of the given element. Function prefers IDL and fallback to the <code>element.setAttribute</code> if there is no writable property in the element prototype.</p><p>You can study all JavaScript elements interfaces to the corresponding HTML elements. All HTML elements inherits from <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement">HTMLElement</a>. To see all available IDLs for example for paragraphs, see <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLParagraphElement">HTMLParagraphElement</a>. Moreover, the <code>assign</code> provides a&nbsp;way to sets declaratively some convenient properties:</p><ul><li>It is possible to sets <code>data-*</code>/<code>aria-*</code> attributes using object notation.</li><li>In opposite, it is also possible to sets <code>data-*</code>/<code>aria-*</code> attribute using camelCase notation.</li><li>You can use string or object as a&nbsp;value for <code>style</code> property.</li><li><code>className</code> (IDL – preffered)/<code>class</code> are ways to add CSS class to the element. You can use string (similarly to <code>class="…"</code> syntax in  HTML) or array of strings. This is handy to concat conditional classes.</li><li>Use <code>classList</code> to toggle specific classes. This will be handy later when the reactivity via signals is beeing introduced.</li><li>The <code>assign</code> also accepts the <code>undefined</code> as a&nbsp;value for any property to remove it from the element declaratively. Also for some IDL the corresponding attribute is removed as it can be confusing. <em>For example, natievly the element’s <code>id</code> is removed by setting the IDL to an empty string.</em></li></ul><p>For processing, the <code>assign</code> internally uses <code>assignAttribute</code> and <code>classListDeclarative</code>.</p><!--<dde:mark type="component" name="example" host="this"/>--><div id="code-5xffb" class="example"><pre><code class="language-javascript">import { assignAttribute, classListDeclarative } from "https://cdn.jsdelivr.net/gh/jaandrle/deka-dom-el/dist/esm-with-signals.js";
+</code></pre></div><script>Flems(document.getElementById("code-5855d"), JSON.parse("{\"files\":[{\"name\":\".js\",\"content\":\"import { el, assign } from \\\"https://cdn.jsdelivr.net/gh/jaandrle/deka-dom-el/dist/esm-with-signals.js\\\";\\nconst color= \\\"lightcoral\\\";\\ndocument.body.append(\\n\\tel(\\\"p\\\", { textContent: \\\"Hello (first time)\\\", style: { color } })\\n);\\ndocument.body.append(\\n\\tassign(\\n\\t\\tdocument.createElement(\\\"p\\\"),\\n\\t\\t{ textContent: \\\"Hello (second time)\\\", style: { color } }\\n\\t)\\n);\\n\"}],\"toolbar\":false}"));</script><p>The <code>assign</code> function provides improved behaviour of <code>Object.assign()</code>. You can declaratively sets any IDL and attribute of the given element. Function prefers IDL and fallback to the <code>element.setAttribute</code> if there is no writable property in the element prototype.</p><p>You can study all JavaScript elements interfaces to the corresponding HTML elements. All HTML elements inherits from <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement">HTMLElement</a>. To see all available IDLs for example for paragraphs, see <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLParagraphElement">HTMLParagraphElement</a>. Moreover, the <code>assign</code> provides a&nbsp;way to sets declaratively some convenient properties:</p><ul><li>It is possible to sets <code>data-*</code>/<code>aria-*</code> attributes using object notation.</li><li>In opposite, it is also possible to sets <code>data-*</code>/<code>aria-*</code> attribute using camelCase notation.</li><li>You can use string or object as a&nbsp;value for <code>style</code> property.</li><li><code>className</code> (IDL – preffered)/<code>class</code> are ways to add CSS class to the element. You can use string (similarly to <code>class="…"</code> syntax in  HTML) or array of strings. This is handy to concat conditional classes.</li><li>Use <code>classList</code> to toggle specific classes. This will be handy later when the reactivity via signals is beeing introduced.</li><li>The <code>assign</code> also accepts the <code>undefined</code> as a&nbsp;value for any property to remove it from the element declaratively. Also for some IDL the corresponding attribute is removed as it can be confusing. <em>For example, natievly the element’s <code>id</code> is removed by setting the IDL to an empty string.</em></li></ul><p>For processing, the <code>assign</code> internally uses <code>assignAttribute</code> and <code>classListDeclarative</code>.</p><!--<dde:mark type="component" name="example" host="this"/>--><div id="code-5f8sp" class="example"><pre><code class="language-javascript">import { assignAttribute, classListDeclarative } from "https://cdn.jsdelivr.net/gh/jaandrle/deka-dom-el/dist/esm-with-signals.js";
 const paragraph= document.createElement("p");
 
 assignAttribute(paragraph, "textContent", "Hello, world!");
@@ -48,7 +48,7 @@ console.log(paragraph.outerHTML);
 document.body.append(
 	paragraph
 );
-</code></pre></div><script>Flems(document.getElementById("code-5xffb"), JSON.parse("{\"files\":[{\"name\":\".js\",\"content\":\"import { assignAttribute, classListDeclarative } from \\\"https://cdn.jsdelivr.net/gh/jaandrle/deka-dom-el/dist/esm-with-signals.js\\\";\\nconst paragraph= document.createElement(\\\"p\\\");\\n\\nassignAttribute(paragraph, \\\"textContent\\\", \\\"Hello, world!\\\");\\nassignAttribute(paragraph, \\\"style\\\", { color: \\\"navy\\\" });\\n\\nassignAttribute(paragraph, \\\"dataTest1\\\", \\\"v1\\\");\\nassignAttribute(paragraph, \\\"dataset\\\", { test2: \\\"v2\\\" });\\n\\nassignAttribute(paragraph, \\\"ariaLabel\\\", \\\"v1\\\");\\nassignAttribute(paragraph, \\\"ariaset\\\", { role: \\\"none\\\" });\\n\\n\\nclassListDeclarative(paragraph, {\\n\\tclassAdd: true,\\n\\tclassRemove: false,\\n\\tclassAdd1: 1,\\n\\tclassRemove1: 0,\\n\\tclassToggle: -1\\n});\\n\\nconsole.log(paragraph.outerHTML);\\ndocument.body.append(\\n\\tparagraph\\n);\\n\"}],\"toolbar\":false}"));</script><h3>Native JavaScript templating</h3><p>By default, the native JS has no good way to define HTML template using DOM API:</p><!--<dde:mark type="component" name="example" host="this"/>--><div id="code-kpwcn" class="example"><pre><code class="language-javascript">document.body.append(
+</code></pre></div><script>Flems(document.getElementById("code-5f8sp"), JSON.parse("{\"files\":[{\"name\":\".js\",\"content\":\"import { assignAttribute, classListDeclarative } from \\\"https://cdn.jsdelivr.net/gh/jaandrle/deka-dom-el/dist/esm-with-signals.js\\\";\\nconst paragraph= document.createElement(\\\"p\\\");\\n\\nassignAttribute(paragraph, \\\"textContent\\\", \\\"Hello, world!\\\");\\nassignAttribute(paragraph, \\\"style\\\", { color: \\\"navy\\\" });\\n\\nassignAttribute(paragraph, \\\"dataTest1\\\", \\\"v1\\\");\\nassignAttribute(paragraph, \\\"dataset\\\", { test2: \\\"v2\\\" });\\n\\nassignAttribute(paragraph, \\\"ariaLabel\\\", \\\"v1\\\");\\nassignAttribute(paragraph, \\\"ariaset\\\", { role: \\\"none\\\" });\\n\\n\\nclassListDeclarative(paragraph, {\\n\\tclassAdd: true,\\n\\tclassRemove: false,\\n\\tclassAdd1: 1,\\n\\tclassRemove1: 0,\\n\\tclassToggle: -1\\n});\\n\\nconsole.log(paragraph.outerHTML);\\ndocument.body.append(\\n\\tparagraph\\n);\\n\"}],\"toolbar\":false}"));</script><h3>Native JavaScript templating</h3><p>By default, the native JS has no good way to define HTML template using DOM API:</p><!--<dde:mark type="component" name="example" host="this"/>--><div id="code-48dwd" class="example"><pre><code class="language-javascript">document.body.append(
 	document.createElement("div"),
 	document.createElement("span"),
 	document.createElement("main")
@@ -59,7 +59,7 @@ const template= document.createElement("main").append(
 	document.createElement("span"),
 );
 console.log(typeof template==="undefined");
-</code></pre></div><script>Flems(document.getElementById("code-kpwcn"), JSON.parse("{\"files\":[{\"name\":\".js\",\"content\":\"document.body.append(\\n\\tdocument.createElement(\\\"div\\\"),\\n\\tdocument.createElement(\\\"span\\\"),\\n\\tdocument.createElement(\\\"main\\\")\\n);\\nconsole.log(document.body.innerHTML.includes(\\\"<div></div><span></span><main></main>\\\"));\\nconst template= document.createElement(\\\"main\\\").append(\\n\\tdocument.createElement(\\\"div\\\"),\\n\\tdocument.createElement(\\\"span\\\"),\\n);\\nconsole.log(typeof template===\\\"undefined\\\");\\n\"}],\"toolbar\":false}"));</script><p>This library therefore ooverwrites the <code>append</code> method to always return parent element.</p><!--<dde:mark type="component" name="example" host="this"/>--><div id="code-s5v9a" class="example"><pre><code class="language-javascript">import { el } from "https://cdn.jsdelivr.net/gh/jaandrle/deka-dom-el/dist/esm-with-signals.js";
+</code></pre></div><script>Flems(document.getElementById("code-48dwd"), JSON.parse("{\"files\":[{\"name\":\".js\",\"content\":\"document.body.append(\\n\\tdocument.createElement(\\\"div\\\"),\\n\\tdocument.createElement(\\\"span\\\"),\\n\\tdocument.createElement(\\\"main\\\")\\n);\\nconsole.log(document.body.innerHTML.includes(\\\"<div></div><span></span><main></main>\\\"));\\nconst template= document.createElement(\\\"main\\\").append(\\n\\tdocument.createElement(\\\"div\\\"),\\n\\tdocument.createElement(\\\"span\\\"),\\n);\\nconsole.log(typeof template===\\\"undefined\\\");\\n\"}],\"toolbar\":false}"));</script><p>This library therefore overwrites the <code>append</code> method of created elements to always return parent element.</p><!--<dde:mark type="component" name="example" host="this"/>--><div id="code-k8b3j" class="example"><pre><code class="language-javascript">import { el } from "https://cdn.jsdelivr.net/gh/jaandrle/deka-dom-el/dist/esm-with-signals.js";
 document.head.append(
 	el("style").append(
 		"tr, td{ border: 1px solid red; padding: 1em; }",
@@ -83,7 +83,7 @@ document.body.append(
 		)
 	)
 );
-</code></pre></div><script>Flems(document.getElementById("code-s5v9a"), JSON.parse("{\"files\":[{\"name\":\".js\",\"content\":\"import { el } from \\\"https://cdn.jsdelivr.net/gh/jaandrle/deka-dom-el/dist/esm-with-signals.js\\\";\\ndocument.head.append(\\n\\tel(\\\"style\\\").append(\\n\\t\\t\\\"tr, td{ border: 1px solid red; padding: 1em; }\\\",\\n\\t\\t\\\"table{ border-collapse: collapse; }\\\"\\n\\t)\\n);\\ndocument.body.append(\\n\\tel(\\\"p\\\", \\\"Example of a complex template. Using for example nesting lists:\\\"),\\n\\tel(\\\"ul\\\").append(\\n\\t\\tel(\\\"li\\\", \\\"List item 1\\\"),\\n\\t\\tel(\\\"li\\\").append(\\n\\t\\t\\tel(\\\"ul\\\").append(\\n\\t\\t\\t\\tel(\\\"li\\\", \\\"Nested list item 1\\\"),\\n\\t\\t\\t)\\n\\t\\t)\\n\\t),\\n\\tel(\\\"table\\\").append(\\n\\t\\tel(\\\"tr\\\").append(\\n\\t\\t\\tel(\\\"td\\\", \\\"Row 1 – Col 1\\\"),\\n\\t\\t\\tel(\\\"td\\\", \\\"Row 1 – Col 2\\\")\\n\\t\\t)\\n\\t)\\n);\\n\"}],\"toolbar\":false}"));</script><h2>Creating advanced (reactive) templates and components</h2><h3>Basic components</h3><p>You can use functions for encapsulation (repeating) logic. The <code>el</code> accepts function as first argument. In that case, the function should return dom elements and the second argument for <code>el</code> is argument for given element.</p><!--<dde:mark type="component" name="example" host="this"/>--><div id="code-4m21m" class="example"><pre><code class="language-javascript">import { el } from "https://cdn.jsdelivr.net/gh/jaandrle/deka-dom-el/dist/esm-with-signals.js";
+</code></pre></div><script>Flems(document.getElementById("code-k8b3j"), JSON.parse("{\"files\":[{\"name\":\".js\",\"content\":\"import { el } from \\\"https://cdn.jsdelivr.net/gh/jaandrle/deka-dom-el/dist/esm-with-signals.js\\\";\\ndocument.head.append(\\n\\tel(\\\"style\\\").append(\\n\\t\\t\\\"tr, td{ border: 1px solid red; padding: 1em; }\\\",\\n\\t\\t\\\"table{ border-collapse: collapse; }\\\"\\n\\t)\\n);\\ndocument.body.append(\\n\\tel(\\\"p\\\", \\\"Example of a complex template. Using for example nesting lists:\\\"),\\n\\tel(\\\"ul\\\").append(\\n\\t\\tel(\\\"li\\\", \\\"List item 1\\\"),\\n\\t\\tel(\\\"li\\\").append(\\n\\t\\t\\tel(\\\"ul\\\").append(\\n\\t\\t\\t\\tel(\\\"li\\\", \\\"Nested list item 1\\\"),\\n\\t\\t\\t)\\n\\t\\t)\\n\\t),\\n\\tel(\\\"table\\\").append(\\n\\t\\tel(\\\"tr\\\").append(\\n\\t\\t\\tel(\\\"td\\\", \\\"Row 1 – Col 1\\\"),\\n\\t\\t\\tel(\\\"td\\\", \\\"Row 1 – Col 2\\\")\\n\\t\\t)\\n\\t)\\n);\\n\"}],\"toolbar\":false}"));</script><h2>Creating advanced (reactive) templates and components</h2><h3>Basic components</h3><p>You can use functions for encapsulation (repeating) logic. The <code>el</code> accepts function as first argument. In that case, the function should return dom elements and the second argument for <code>el</code> is argument for given element.</p><!--<dde:mark type="component" name="example" host="this"/>--><div id="code-4qwvd" class="example"><pre><code class="language-javascript">import { el } from "https://cdn.jsdelivr.net/gh/jaandrle/deka-dom-el/dist/esm-with-signals.js";
 document.head.append(
 	el("style").append(
 		".class1{ font-weight: bold; }",
@@ -100,4 +100,4 @@ function component({ className, textContent }){
 		el("p", textContent)
 	);
 }
-</code></pre></div><script>Flems(document.getElementById("code-4m21m"), JSON.parse("{\"files\":[{\"name\":\".js\",\"content\":\"import { el } from \\\"https://cdn.jsdelivr.net/gh/jaandrle/deka-dom-el/dist/esm-with-signals.js\\\";\\ndocument.head.append(\\n\\tel(\\\"style\\\").append(\\n\\t\\t\\\".class1{ font-weight: bold; }\\\",\\n\\t\\t\\\".class2{ color: purple; }\\\"\\n\\t)\\n);\\ndocument.body.append(\\n\\tel(component, { className: \\\"class2\\\", textContent: \\\"Hello World!\\\" }),\\n\\tcomponent({ className: \\\"class2\\\", textContent: \\\"Hello World!\\\" })\\n);\\n\\nfunction component({ className, textContent }){\\n\\treturn el(\\\"div\\\", { className: [ \\\"class1\\\", className ] }).append(\\n\\t\\tel(\\\"p\\\", textContent)\\n\\t);\\n}\\n\"}],\"toolbar\":false}"));</script><p>It is nice to use similar naming convention as native DOM API.</p></main></body></html>
+</code></pre></div><script>Flems(document.getElementById("code-4qwvd"), JSON.parse("{\"files\":[{\"name\":\".js\",\"content\":\"import { el } from \\\"https://cdn.jsdelivr.net/gh/jaandrle/deka-dom-el/dist/esm-with-signals.js\\\";\\ndocument.head.append(\\n\\tel(\\\"style\\\").append(\\n\\t\\t\\\".class1{ font-weight: bold; }\\\",\\n\\t\\t\\\".class2{ color: purple; }\\\"\\n\\t)\\n);\\ndocument.body.append(\\n\\tel(component, { className: \\\"class2\\\", textContent: \\\"Hello World!\\\" }),\\n\\tcomponent({ className: \\\"class2\\\", textContent: \\\"Hello World!\\\" })\\n);\\n\\nfunction component({ className, textContent }){\\n\\treturn el(\\\"div\\\", { className: [ \\\"class1\\\", className ] }).append(\\n\\t\\tel(\\\"p\\\", textContent)\\n\\t);\\n}\\n\"}],\"toolbar\":false}"));</script><p>It is nice to use similar naming convention as native DOM API.</p></main></body></html>

docs/flems_soubory/commandline.html

@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html class="TridactylOwnNamespace TridactylThemeDark"><head>
+<meta http-equiv="content-type" content="text/html; charset=UTF-8">
+        <meta charset="utf-8">
+        <title>Tridactyl commandline</title>
+	<link rel="stylesheet" href="commandline_data/cleanslate.css">
+	<link rel="stylesheet" href="commandline_data/commandline.css">
+    </head>
+    <body>
+        <div id="completions"></div>
+        <div id="command-line-holder"><span id="tridactyl-colon"></span><input id="tridactyl-input"></div>
+        <script src="commandline_data/commandline_frame.js"></script>
+    
+
+</body></html>

docs/flems_soubory/commandline_data/cleanslate.css

@@ -0,0 +1,449 @@
+/*!
+* CleanSlate
+*   github.com/premasagar/cleanslate
+*
+*//*
+    An extreme CSS reset stylesheet, for normalising the styling of a container element and its children.
+
+    by Premasagar Rose
+        dharmafly.com
+
+    license
+        opensource.org/licenses/mit-license.php
+
+    **
+        
+    v0.9.3
+        
+*/
+
+/* == BLANKET RESET RULES == */
+
+/* HTML 4.01 */
+.cleanslate, .cleanslate h1, .cleanslate h2, .cleanslate h3, .cleanslate h4, .cleanslate h5, .cleanslate h6, .cleanslate p, .cleanslate td, .cleanslate dl, .cleanslate tr, .cleanslate dt, .cleanslate ol, .cleanslate form, .cleanslate select, .cleanslate option, .cleanslate pre, .cleanslate div, .cleanslate table,  .cleanslate th, .cleanslate tbody, .cleanslate tfoot, .cleanslate caption, .cleanslate thead, .cleanslate ul, .cleanslate li, .cleanslate address, .cleanslate blockquote, .cleanslate dd, .cleanslate fieldset, .cleanslate li, .cleanslate iframe, .cleanslate strong, .cleanslate legend, .cleanslate em, .cleanslate summary, .cleanslate cite, .cleanslate span, .cleanslate input, .cleanslate sup, .cleanslate label, .cleanslate dfn, .cleanslate object, .cleanslate big, .cleanslate q, .cleanslate samp, .cleanslate acronym, .cleanslate small, .cleanslate img, .cleanslate strike, .cleanslate code, .cleanslate sub, .cleanslate ins, .cleanslate textarea, .cleanslate button, .cleanslate var, .cleanslate a, .cleanslate abbr, .cleanslate applet, .cleanslate del, .cleanslate kbd, .cleanslate tt, .cleanslate b, .cleanslate i, .cleanslate hr,
+
+/* HTML5 - Sept 2013 taken from MDN https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/HTML5_element_list */
+.cleanslate article, .cleanslate aside, .cleanslate figure, .cleanslate figcaption, .cleanslate footer, .cleanslate header, .cleanslate menu, .cleanslate nav, .cleanslate section, .cleanslate time, .cleanslate mark, .cleanslate audio, .cleanslate video, .cleanslate abbr, .cleanslate address, .cleanslate area, .cleanslate blockquote, .cleanslate canvas, .cleanslate caption, .cleanslate cite, .cleanslate code, .cleanslate colgroup, .cleanslate col, .cleanslate datalist, .cleanslate fieldset, .cleanslate main, .cleanslate map, .cleanslate meta, .cleanslate optgroup, .cleanslate output, .cleanslate progress {
+    background-attachment:scroll !important;
+    background-color:transparent !important;
+    background-image:none !important; /* This rule affects the use of pngfix JavaScript http://dillerdesign.com/experiment/DD_BelatedPNG for IE6, which is used to force the browser to recognise alpha-transparent PNGs files that replace the IE6 lack of PNG transparency. (The rule overrides the VML image that is used to replace the given CSS background-image). If you don't know what that means, then you probably haven't used the pngfix script, and this comment may be ignored :) */
+    background-position:0 0 !important;
+    background-repeat:repeat !important;
+    border-color:black !important;
+    border-color:currentColor !important; /* `border-color` should match font color. Modern browsers (incl. IE9) allow the use of "currentColor" to match the current font 'color' value <http://www.w3.org/TR/css3-color/#currentcolor>. For older browsers, a default of 'black' is given before this rule. Guideline to support older browsers: if you haven't already declared a border-color for an element, be sure to do so, e.g. when you first declare the border-width. */
+    border-radius:0 !important;
+    border-style:none !important;
+    border-width:medium !important;
+    bottom:auto !important;
+    clear:none !important;
+    clip:auto !important;
+    color:inherit !important;
+    counter-increment:none !important;
+    counter-reset:none !important;
+    cursor:auto !important;
+    direction:inherit !important;
+    display:inline !important;
+    float:none !important;
+    font-family: inherit !important; /* As with other inherit values, this needs to be set on the root container element */
+    font-size: inherit !important;
+    font-style:inherit !important;
+    font-variant:normal !important;
+    font-weight:inherit !important;
+    height:auto !important;
+    left:auto !important;
+    letter-spacing:normal !important;
+    line-height:inherit !important;
+    list-style-type: inherit !important; /* Could set list-style-type to none */
+    list-style-position: outside !important;
+    list-style-image: none !important;
+    margin:0 !important;
+    max-height:none !important;
+    max-width:none !important;
+    min-height:0 !important;
+    min-width:0 !important;
+    opacity:1;
+    outline:invert none medium !important;
+    overflow:visible !important;
+    padding:0 !important;
+    position:static !important;
+    quotes: "" "" !important;
+    right:auto !important;
+    table-layout:auto !important;
+    text-align:inherit !important;
+    text-decoration:inherit !important;
+    text-indent:0 !important;
+    text-transform:none !important;
+    top:auto !important;
+    unicode-bidi:normal !important;
+    vertical-align:baseline !important;
+    visibility:inherit !important;
+    white-space:normal !important;
+    width:auto !important;
+    word-spacing:normal !important;
+    z-index:auto !important;
+    
+    /* CSS3 */
+    /* Including all prefixes according to http://caniuse.com/ */
+    /* CSS Animations don't cascade, so don't require resetting */
+    -webkit-background-origin: padding-box !important;
+            background-origin: padding-box !important;
+    -webkit-background-clip: border-box !important;
+            background-clip: border-box !important;
+    -webkit-background-size: auto !important;
+       -moz-background-size: auto !important;
+            background-size: auto !important;
+    -webkit-border-image: none !important;
+       -moz-border-image: none !important;
+         -o-border-image: none !important;
+            border-image: none !important;
+    -webkit-border-radius:0 !important;
+       -moz-border-radius:0 !important;
+            border-radius: 0 !important;
+    -webkit-box-shadow: none !important;
+            box-shadow: none !important;
+    -webkit-box-sizing: content-box !important;
+       -moz-box-sizing: content-box !important;
+            box-sizing: content-box !important;
+    -webkit-column-count: auto !important;
+       -moz-column-count: auto !important;
+            column-count: auto !important;
+    -webkit-column-gap: normal !important;
+       -moz-column-gap: normal !important;
+            column-gap: normal !important;
+    -webkit-column-rule: medium none black !important;
+       -moz-column-rule: medium none black !important;
+            column-rule: medium none black !important;
+    -webkit-column-span: 1 !important;
+       -moz-column-span: 1 !important; /* doesn't exist yet but probably will */
+            column-span: 1 !important;
+    -webkit-column-width: auto !important;
+       -moz-column-width: auto !important;
+            column-width: auto !important;
+    font-feature-settings: normal !important;
+    overflow-x: visible !important;
+    overflow-y: visible !important;
+    -webkit-hyphens: manual !important;
+       -moz-hyphens: manual !important;
+            hyphens: manual !important;
+    -webkit-perspective: none !important;
+       -moz-perspective: none !important;
+        -ms-perspective: none !important;
+         -o-perspective: none !important;
+            perspective: none !important;
+    -webkit-perspective-origin: 50% 50% !important;
+       -moz-perspective-origin: 50% 50% !important;
+        -ms-perspective-origin: 50% 50% !important;
+         -o-perspective-origin: 50% 50% !important;
+            perspective-origin: 50% 50% !important;
+    -webkit-backface-visibility: visible !important;
+       -moz-backface-visibility: visible !important;
+        -ms-backface-visibility: visible !important;
+         -o-backface-visibility: visible !important;
+            backface-visibility: visible !important;
+    text-shadow: none !important;
+    -webkit-transition: all 0s ease 0s !important;
+            transition: all 0s ease 0s !important;
+    -webkit-transform: none !important;
+       -moz-transform: none !important;
+        -ms-transform: none !important;
+         -o-transform: none !important;
+            transform: none !important;
+    -webkit-transform-origin: 50% 50% !important;
+       -moz-transform-origin: 50% 50% !important;
+        -ms-transform-origin: 50% 50% !important;
+         -o-transform-origin: 50% 50% !important;
+            transform-origin: 50% 50% !important;
+    -webkit-transform-style: flat !important;
+       -moz-transform-style: flat !important;
+        -ms-transform-style: flat !important;
+         -o-transform-style: flat !important;
+            transform-style: flat !important;
+    word-break: normal !important;
+}
+
+/* == BLOCK-LEVEL == */
+/* Actually, some of these should be inline-block and other values, but block works fine (TODO: rigorously verify this) */
+/* HTML 4.01 */
+.cleanslate, .cleanslate h3, .cleanslate h5, .cleanslate p, .cleanslate h1, .cleanslate dl, .cleanslate dt, .cleanslate h6, .cleanslate ol, .cleanslate form, .cleanslate option, .cleanslate pre, .cleanslate div, .cleanslate h2, .cleanslate caption, .cleanslate h4, .cleanslate ul, .cleanslate address, .cleanslate blockquote, .cleanslate dd, .cleanslate fieldset, .cleanslate hr,
+
+/* HTML5 new elements */
+.cleanslate article, .cleanslate dialog, .cleanslate figure, .cleanslate footer, .cleanslate header, .cleanslate hgroup, .cleanslate menu, .cleanslate nav, .cleanslate section, .cleanslate audio, .cleanslate video, .cleanslate address, .cleanslate blockquote, .cleanslate colgroup, .cleanslate main, .cleanslate progress, .cleanslate summary {
+    display:block !important; 
+}
+.cleanslate h1, .cleanslate h2, .cleanslate h3, .cleanslate h4, .cleanslate h5, .cleanslate h6 {
+    font-weight: bold !important;
+}
+.cleanslate h1 {
+    font-size: 2em !important;
+    padding: .67em 0 !important;
+}
+.cleanslate h2 {
+    font-size: 1.5em !important;
+    padding: .83em 0 !important;
+}
+.cleanslate h3 {
+    font-size: 1.17em !important;
+    padding: .83em 0 !important;
+}
+.cleanslate h4 {
+    font-size: 1em !important;
+}
+.cleanslate h5 {
+    font-size: .83em !important;
+}
+.cleanslate p {
+    margin: 1em 0 !important;
+}
+.cleanslate table {
+    display: table !important;
+}
+.cleanslate thead {
+    display: table-header-group !important;
+}
+.cleanslate tbody {
+    display: table-row-group !important;
+}
+.cleanslate tfoot {
+    display: table-footer-group !important;
+}
+.cleanslate tr {
+    display: table-row !important;
+}
+.cleanslate th, .cleanslate td {
+    display: table-cell !important;
+    padding: 2px !important;
+}
+
+/* == SPECIFIC ELEMENTS == */
+/* Some of these are browser defaults; some are just useful resets */
+.cleanslate ol, .cleanslate ul {
+    margin: 1em 0 !important;
+}
+.cleanslate ul li, .cleanslate ul ul li, .cleanslate ul ul ul li, .cleanslate ol li, .cleanslate ol ol li, .cleanslate ol ol ol li, .cleanslate ul ol ol li, .cleanslate ul ul ol li, .cleanslate ol ul ul li, .cleanslate ol ol ul li {
+    list-style-position: inside !important;
+    margin-top: .08em !important;
+}
+.cleanslate ol ol, .cleanslate ol ol ol, .cleanslate ul ul, .cleanslate ul ul ul, .cleanslate ol ul, .cleanslate ol ul ul, .cleanslate ol ol ul, .cleanslate ul ol, .cleanslate ul ol ol, .cleanslate ul ul ol {
+    padding-left: 40px !important;
+    margin: 0 !important;
+}
+/* helper for general navigation */
+.cleanslate nav ul, .cleanslate nav ol {
+    list-style-type:none !important;
+
+}
+.cleanslate ul, .cleanslate menu {
+    list-style-type:disc !important;
+}
+.cleanslate ol {
+    list-style-type:decimal !important;
+}
+.cleanslate ol ul, .cleanslate ul ul, .cleanslate menu ul, .cleanslate ol menu, .cleanslate ul menu, .cleanslate menu menu {
+    list-style-type:circle !important;
+}
+.cleanslate ol ol ul, .cleanslate ol ul ul, .cleanslate ol menu ul, .cleanslate ol ol menu, .cleanslate ol ul menu, .cleanslate ol menu menu, .cleanslate ul ol ul, .cleanslate ul ul ul, .cleanslate ul menu ul, .cleanslate ul ol menu, .cleanslate ul ul menu, .cleanslate ul menu menu, .cleanslate menu ol ul, .cleanslate menu ul ul, .cleanslate menu menu ul, .cleanslate menu ol menu, .cleanslate menu ul menu, .cleanslate menu menu menu {
+    list-style-type:square !important;
+}
+.cleanslate li {    
+    display:list-item !important;
+    /* Fixes IE7 issue with positioning of nested bullets */
+    min-height:auto !important;
+    min-width:auto !important;
+    padding-left: 20px !important; /* replace -webkit-padding-start: 40px; */
+}
+.cleanslate strong {
+    font-weight:bold !important;
+}
+.cleanslate em {
+    font-style:italic !important;
+}
+.cleanslate kbd, .cleanslate samp, .cleanslate code {
+  font-family:monospace !important;
+}
+.cleanslate a {
+    color: blue !important;
+    text-decoration: underline !important;s
+}
+.cleanslate a:visited {
+    color: #529 !important;
+}
+.cleanslate a, .cleanslate a *, .cleanslate input[type=submit], .cleanslate input[type=radio], .cleanslate input[type=checkbox], .cleanslate select {
+    cursor:pointer !important;
+}
+.cleanslate button, .cleanslate input[type=submit] {
+    text-align: center !important;
+    padding: 2px 6px 3px !important;
+    border-radius: 4px !important;
+    text-decoration: none !important;
+    font-family: arial, helvetica, sans-serif !important;
+    font-size: small !important;
+    background: white !important;
+    -webkit-appearance: push-button !important;
+    color: buttontext !important;
+    border: 1px #a6a6a6 solid !important;
+    background: lightgrey !important; /* Old browsers */
+    background: rgb(255,255,255); /* Old browsers */
+    background: -moz-linear-gradient(top,  rgba(255,255,255,1) 0%, rgba(221,221,221,1) 100%, rgba(209,209,209,1) 100%, rgba(221,221,221,1) 100%) !important; /* FF3.6+ */
+    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(221,221,221,1)), color-stop(100%,rgba(209,209,209,1)), color-stop(100%,rgba(221,221,221,1))) !important; /* Chrome,Safari4+ */
+    background: -webkit-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(221,221,221,1) 100%,rgba(209,209,209,1) 100%,rgba(221,221,221,1) 100%) !important; /* Chrome10+,Safari5.1+ */
+    background: -o-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(221,221,221,1) 100%,rgba(209,209,209,1) 100%,rgba(221,221,221,1) 100%) !important; /* Opera 11.10+ */
+    background: -ms-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(221,221,221,1) 100%,rgba(209,209,209,1) 100%,rgba(221,221,221,1) 100%) !important; /* IE10+ */
+    background: linear-gradient(to bottom,  rgba(255,255,255,1) 0%,rgba(221,221,221,1) 100%,rgba(209,209,209,1) 100%,rgba(221,221,221,1) 100%) !important; /* W3C */
+    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#dddddd',GradientType=0 ) !important; /* IE6-9 */
+    -webkit-box-shadow: 1px 1px 0px #eee !important;
+       -moz-box-shadow: 1px 1px 0px #eee !important;
+         -o-box-shadow: 1px 1px 0px #eee !important;
+            box-shadow: 1px 1px 0px #eee !important;
+    outline: initial !important;
+}
+.cleanslate button {
+    padding: 1px 6px 2px 6px !important;
+    margin-right: 5px !important;
+}
+.cleanslate input[type=hidden] {
+    display:none !important;
+}
+/* restore form defaults */
+.cleanslate textarea {
+    -webkit-appearance: textarea !important;
+    background: white !important;
+    padding: 2px !important;
+    margin-left: 4px !important;
+    word-wrap: break-word !important;
+    white-space: pre-wrap !important;
+    font-size: 11px !important;
+    font-family: arial, helvetica, sans-serif !important;
+    line-height: 13px !important;
+    resize: both !important;
+}
+.cleanslate select, .cleanslate textarea, .cleanslate input {
+    border:1px solid #ccc !important;
+}
+.cleanslate select {
+    font-size: 11px !important;
+    font-family: helvetica, arial, sans-serif !important;
+    display: inline-block;
+}
+.cleanslate textarea:focus, .cleanslate input:focus {
+    outline: auto 5px -webkit-focus-ring-color !important;
+    outline: initial !important;
+}
+.cleanslate input[type=text] {
+    background: white !important;
+    padding: 1px !important;
+    font-family: initial !important;
+    font-size: small !important;
+}
+.cleanslate input[type=checkbox], .cleanslate input[type=radio] {
+    border: 1px #2b2b2b solid !important;
+    border-radius: 4px !important;
+}
+.cleanslate input[type=checkbox], .cleanslate input[type=radio] {
+    outline: intial !important;
+}
+.cleanslate input[type=radio] {
+    margin: 2px 2px 3px 2px !important;
+}
+.cleanslate input[type=submit]:active, .cleanslate button:active {
+    background: rgb(59,103,158) !important; /* Old browsers */
+    background: -moz-linear-gradient(top, rgba(59,103,158,1) 0%, rgba(43,136,217,1) 50%, rgba(32,124,202,1) 51%, rgba(125,185,232,1) 100%) !important; /* FF3.6+ */
+    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(59,103,158,1)), color-stop(50%,rgba(43,136,217,1)), color-stop(51%,rgba(32,124,202,1)), color-stop(100%,rgba(125,185,232,1))) !important; /* Chrome,Safari4+ */
+    background: -webkit-linear-gradient(top, rgba(59,103,158,1) 0%,rgba(43,136,217,1) 50%,rgba(32,124,202,1) 51%,rgba(125,185,232,1) 100%) !important; /* Chrome10+,Safari5.1+ */
+    background: -o-linear-gradient(top, rgba(59,103,158,1) 0%,rgba(43,136,217,1) 50%,rgba(32,124,202,1) 51%,rgba(125,185,232,1) 100%) !important; /* Opera 11.10+ */
+    background: -ms-linear-gradient(top, rgba(59,103,158,1) 0%,rgba(43,136,217,1) 50%,rgba(32,124,202,1) 51%,rgba(125,185,232,1) 100%) !important; /* IE10+ */
+    background: linear-gradient(to bottom, rgba(59,103,158,1) 0%,rgba(43,136,217,1) 50%,rgba(32,124,202,1) 51%,rgba(125,185,232,1) 100%) !important; /* W3C */
+    border-color: #5259b0 !important;
+}
+.cleanslate abbr[title], .cleanslate acronym[title], .cleanslate dfn[title] {
+    cursor:help !important;
+    border-bottom-width:1px !important;
+    border-bottom-style:dotted !important;
+}
+.cleanslate ins {
+    background-color:#ff9 !important;
+    color:black !important;
+}
+.cleanslate del {
+    text-decoration: line-through !important;
+}
+.cleanslate blockquote, .cleanslate q  {
+    quotes:none !important; /* HTML5 */
+}
+.cleanslate blockquote:before, .cleanslate blockquote:after, .cleanslate q:before, .cleanslate q:after, .cleanslate li:before, .cleanslate li:after  {
+    content:"" !important;
+}
+.cleanslate input, .cleanslate select {
+    vertical-align:middle !important;
+}
+
+.cleanslate table {
+    border-collapse:collapse !important;
+    border-spacing:0 !important;
+}
+.cleanslate hr {
+    display:block !important;
+    height:1px !important;
+    border:0 !important;
+    border-top:1px solid #ccc !important;
+    margin:1em 0 !important;
+}
+.cleanslate *[dir=rtl] {
+    direction: rtl !important;
+}
+.cleanslate mark {
+    background-color:#ff9 !important;
+    color:black !important;
+    font-style:italic !important;
+    font-weight:bold !important;
+}
+.cleanslate menu {
+    padding-left: 40px !important;
+    padding-top: 8px !important;
+}
+
+/* additional helpers */
+.cleanslate [hidden],
+.cleanslate template {
+    display: none !important;
+}
+.cleanslate abbr[title] {
+    border-bottom: 1px dotted !important;
+}
+.cleanslate sub, .cleanslate sup {
+    font-size: 75% !important;
+    line-height: 0 !important;
+    position: relative !important;
+    vertical-align: baseline !important;
+}
+.cleanslate sup {
+    top: -0.5em !important;
+}
+.cleanslate sub {
+    bottom: -0.25em !important;
+}
+.cleanslate img {
+    border: 0 !important;
+}
+.cleanslate figure {
+    margin: 0 !important;
+}
+.cleanslate textarea {
+    overflow: auto !important;
+    vertical-align: top !important;
+}
+
+/* == ROOT CONTAINER ELEMENT == */
+/* This contains default values for child elements to inherit  */
+.cleanslate {
+    font-size: medium !important;
+    line-height: 1 !important;
+    direction:ltr !important;
+    text-align: left !important; /* for IE, Opera */
+    text-align: start !important; /* recommended W3C Spec */
+    font-family: "Times New Roman", Times, serif !important; /* Override this with whatever font-family is required */
+    color: black !important;
+    font-style:normal !important;
+    font-weight:normal !important;
+    text-decoration:none !important;
+    list-style-type:disc !important;
+}

docs/flems_soubory/commandline_data/commandline.css

@@ -0,0 +1,299 @@
+@import url("../themes/auto/auto.css");
+
+body {
+    overflow: hidden;
+    margin: 0;
+    position: absolute;
+    /* CSS is pants. Move the bar down a tiny bit to cover up the gap. */
+    top: 1px;
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+}
+
+#command-line-holder {
+    background: var(--tridactyl-cmdl-bg);
+    color: var(--tridactyl-cmdl-fg);
+    font-family: var(--tridactyl-cmdl-font-family);
+    font-size: 9pt;
+    /* reduce the padding added by the colon so that the command line shows up roughly where it used to be */
+    padding-left: 0.125ex;
+}
+
+input {
+    width: 97%;
+    font-family: var(--tridactyl-cmdl-font-family);
+    font-size: var(--tridactyl-cmdl-font-size);
+    line-height: var(--tridactyl-cmdl-line-height);
+    color: var(--tridactyl-cmdl-fg);
+    background: var(--tridactyl-cmdl-bg);
+    border: unset;
+    /* reduce the padding from the colon */
+    /* margin-left: -0.25ex; */
+    /* we currently have a border from the completions */
+    /* border-top: solid 1px lightgray; */
+}
+
+input:focus {
+    outline: none;
+}
+
+#tridactyl-colon::before {
+    content: ":";
+}
+
+/* COMPLETIONS */
+
+#completions {
+    --option-height: var(--tridactyl-cmplt-option-height);
+    color: var(--tridactyl-cmplt-fg);
+    background: var(--tridactyl-cmplt-bg);
+    display: inline-block;
+    font-size: var(--tridactyl-cmplt-font-size);
+    font-family: var(--tridactyl-cmplt-font-family);
+    overflow: hidden;
+    width: 100%;
+    border-top: var(--tridactyl-cmplt-border-top);
+}
+
+/* Olie doesn't know how CSS inheritance works */
+#completions > div {
+    max-height: calc(20 * var(--option-height));
+    min-height: calc(10 * var(--option-height));
+}
+
+#completions > div > table {
+    width: 100%;
+    font-size: 9pt;
+    border-spacing: 0;
+    table-layout: fixed;
+}
+
+#completions table tr td.prefix {
+    width: 3.2em;
+    padding-left: 0.5em;
+    text-align: center;
+}
+#completions table tr td.container,
+#completions table tr td.icon,
+#completions table tr td.privatewindow {
+    width: 1.5em;
+}
+#completions table tr td.tabcount {
+    width: 6em;
+}
+#completions table tr td.tgroup {
+    width: 10em;
+    padding-left: 0.5em;
+    text-align: right;
+}
+#completions table tr td.tgroup:empty {
+    display: none;
+}
+/* #completions table tr td:nth-of-type(3) { width: 5em; } */
+#completions table tr td.content {
+    width: 50%;
+}
+
+/* Accroding to src/completions/TabHistory.ts formatTimeSpan,
+ * max-width should be 14 characters (14ex), 20ex for more tolorance. */
+#completions table tr td.time {
+    width: 20ex;
+    text-align: right;
+    padding-right: 2ex;
+}
+
+#completions table tr {
+    white-space: nowrap;
+    overflow: hidden;
+}
+
+#completions table tr td {
+    overflow: hidden;
+}
+
+#completions img {
+    display: inline;
+    vertical-align: middle;
+    height: 1em;
+    width: 1em;
+}
+
+#completions .sectionHeader {
+    background: linear-gradient(
+        var(--tridactyl-header-first-bg),
+        var(--tridactyl-header-second-bg),
+        var(--tridactyl-header-third-bg)
+    );
+    font-size: var(--tridactyl-header-font-size);
+    font-weight: var(--tridactyl-header-font-weight);
+    border-bottom: var(--tridactyl-header-border-bottom);
+    padding-left: 0.5ex;
+}
+
+#completions .sectionHeader,
+#completions .option {
+    height: var(--option-height);
+    line-height: var(--option-height);
+}
+
+.url {
+    text-decoration: var(--tridactyl-url-text-decoration);
+}
+
+.option:not(.focused) .url {
+    color: var(--tridactyl-url-fg);
+    background: var(--tridactyl-url-bg);
+}
+
+a.url:hover {
+    cursor: var(--tridactyl-url-cursor);
+    text-decoration: underline;
+}
+
+/* Hide the URLs if the screen is small */
+@media all and (max-width: 500px) {
+    .url {
+        display: none;
+    }
+}
+
+.FindCompletionOption .match {
+    font-weight: bold;
+}
+
+.hidden {
+    display: none;
+}
+
+/* Pick the .url out especially because otherwise its link styles dominate. */
+.focused,
+.focused .url {
+    color: var(--tridactyl-of-fg);
+    background: var(--tridactyl-of-bg);
+}
+
+.option.incognito .privatewindow {
+    background-image: var(--tridactyl-private-window-icon-url);
+}
+
+/* Still completions, but container-related stuff */
+.option .container {
+    mask-size: 1em;
+    mask-repeat: no-repeat;
+    mask-position: center;
+}
+.option .privatewindow {
+    background-size: 1em;
+    background-repeat: no-repeat;
+    background-position: center;
+}
+.option.container_blue .container {
+    background-color: var(--tridactyl-container-color-blue);
+}
+.option.container_turquoise .container {
+    background-color: var(--tridactyl-container-color-turquoise);
+}
+.option.container_green .container {
+    background-color: var(--tridactyl-container-color-green);
+}
+.option.container_yellow .container {
+    background-color: var(--tridactyl-container-color-yellow);
+}
+.option.container_orange .container {
+    background-color: var(--tridactyl-container-color-orange);
+}
+.option.container_red .container {
+    background-color: var(--tridactyl-container-color-red);
+}
+.option.container_pink .container {
+    background-color: var(--tridactyl-container-color-pink);
+}
+.option.container_purple .container {
+    background-color: var(--tridactyl-container-color-purple);
+}
+.option.container_fingerprint .container {
+    mask-image: var(--tridactyl-container-fingerprint-url);
+}
+.option.container_briefcase .container {
+    mask-image: var(--tridactyl-container-briefcase-url);
+}
+.option.container_dollar .container {
+    mask-image: var(--tridactyl-container-dollar-url);
+}
+.option.container_cart .container {
+    mask-image: var(--tridactyl-container-cart-url);
+}
+.option.container_circle .container {
+    mask-image: var(--tridactyl-container-circle-url);
+}
+.option.container_gift .container {
+    mask-image: var(--tridactyl-container-gift-url);
+}
+.option.container_vacation .container {
+    mask-image: var(--tridactyl-container-vacation-url);
+}
+.option.container_food .container {
+    mask-image: var(--tridactyl-container-food-url);
+}
+.option.container_fruit .container {
+    mask-image: var(--tridactyl-container-fruit-url);
+}
+.option.container_pet .container {
+    mask-image: var(--tridactyl-container-pet-url);
+}
+.option.container_tree .container {
+    mask-image: var(--tridactyl-container-tree-url);
+}
+.option.container_chill .container {
+    mask-image: var(--tridactyl-container-chill-url);
+}
+
+.ExcmdCompletionOption td.excmd {
+    padding-left: 0.5em;
+    width: 20%;
+}
+
+.ExcmdCompletionOption td.documentation {
+    width: 100%;
+}
+
+.SettingsCompletionOption td.title {
+    padding-left: 0.5em;
+}
+
+#completions .SettingsCompletionOption td.title,
+#completions .SettingsCompletionOption td.content,
+#completions .SettingsCompletionOption td.type {
+    width: 15%;
+    text-overflow: ellipsis;
+}
+
+#completions .TabGroupCompletionOption td.title {
+    width: 15%;
+}
+
+#completions .TabGroupCompletionOption td.content {
+    width: auto;
+}
+
+.HelpCompletionOption td.name {
+    width: 25%;
+}
+
+#completions .SessionCompletionOption td.type {
+    width: 1ch !important;
+    padding: 0px 3pt;
+}
+
+#completions .SessionCompletionOption td.time {
+    width: 5ch !important;
+    padding: 0px 3pt;
+    text-align: right;
+}
+
+#completions .WindowCompletionOption td.id {
+    width: 6ch !important;
+    text-align: right;
+    padding: 0px 8pt;
+}

docs/index.html

@@ -1,4 +1,4 @@
-<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="index.css"><meta name="description" content="Introducing a&nbsp;library and motivations."><!--<dde:mark type="component" name="metaTwitter" host="this"/>--><meta name="twitter:card" content="summary_large_image"><meta name="twitter:url" content="https://github.com/jaandrle/deka-dom-el"><meta name="twitter:title" content="deka-dom-el"><meta name="twitter:description" content="A low-code library that simplifies the creation of native DOM elements/components using small wrappers and tweaks."><meta name="twitter:creator" content="@jaandrle"><!--<dde:mark type="component" name="metaFacebook" host="this"/>--><meta name="og:url" content="https://github.com/jaandrle/deka-dom-el"><meta name="og:title" content="deka-dom-el"><meta name="og:description" content="A low-code library that simplifies the creation of native DOM elements/components using small wrappers and tweaks."><meta name="og:creator" content="@jaandrle"><title>`deka-dom-el` — Introduction</title><script src="https://flems.io/flems.html" type="text/javascript" charset="utf-8"></script></head><body><!--<dde:mark type="component" name="page" host="this"/>--><!--<dde:mark type="component" name="header" host="this"/>--><header><h1>`deka-dom-el` — Introduction</h1><p>Introducing a&nbsp;library and motivations.</p></header><nav><a href="https://github.com/jaandrle/deka-dom-el"><svg class="icon" viewBox="0 0 32 32"><!--<dde:mark type="component" name="iconGitHub" host="parentElement"/>--><path d="M 16,0.395c -8.836,0 -16,7.163 -16,16c 0,7.069 4.585,13.067 10.942,15.182c 0.8,0.148 1.094,-0.347 1.094,-0.77c 0,-0.381 -0.015,-1.642 -0.022,-2.979c -4.452,0.968 -5.391,-1.888 -5.391,-1.888c -0.728,-1.849 -1.776,-2.341 -1.776,-2.341c -1.452,-0.993 0.11,-0.973 0.11,-0.973c 1.606,0.113 2.452,1.649 2.452,1.649c 1.427,2.446 3.743,1.739 4.656,1.33c 0.143,-1.034 0.558,-1.74 1.016,-2.14c -3.554,-0.404 -7.29,-1.777 -7.29,-7.907c 0,-1.747 0.625,-3.174 1.649,-4.295c -0.166,-0.403 -0.714,-2.03 0.155,-4.234c 0,0 1.344,-0.43 4.401,1.64c 1.276,-0.355 2.645,-0.532 4.005,-0.539c 1.359,0.006 2.729,0.184 4.008,0.539c 3.054,-2.07 4.395,-1.64 4.395,-1.64c 0.871,2.204 0.323,3.831 0.157,4.234c 1.026,1.12 1.647,2.548 1.647,4.295c 0,6.145 -3.743,7.498 -7.306,7.895c 0.574,0.497 1.085,1.47 1.085,2.963c 0,2.141 -0.019,3.864 -0.019,4.391c 0,0.426 0.288,0.925 1.099,0.768c 6.354,-2.118 10.933,-8.113 10.933,-15.18c 0,-8.837 -7.164,-16 -16,-16Z"></path></svg>GitHub</a><a href="./" title="Introducing a&nbsp;library and motivations." class="current">1. Introduction</a><a href="elements" title="Basic concepts of elements modifications and creations.">2. Elements</a></nav><main><p>The library tries to provide pure JavaScript tool(s) to create reactive interfaces. </p><!--<dde:mark type="component" name="example" host="this"/>--><div id="code-5zrzl" class="example"><pre><code class="language-javascript">import { el, S } from "https://cdn.jsdelivr.net/gh/jaandrle/deka-dom-el/dist/esm-with-signals.js";
+<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="index.css"><meta name="description" content="Introducing a&nbsp;library and motivations."><!--<dde:mark type="component" name="metaTwitter" host="this"/>--><meta name="twitter:card" content="summary_large_image"><meta name="twitter:url" content="https://github.com/jaandrle/deka-dom-el"><meta name="twitter:title" content="deka-dom-el"><meta name="twitter:description" content="A low-code library that simplifies the creation of native DOM elements/components using small wrappers and tweaks."><meta name="twitter:creator" content="@jaandrle"><!--<dde:mark type="component" name="metaFacebook" host="this"/>--><meta name="og:url" content="https://github.com/jaandrle/deka-dom-el"><meta name="og:title" content="deka-dom-el"><meta name="og:description" content="A low-code library that simplifies the creation of native DOM elements/components using small wrappers and tweaks."><meta name="og:creator" content="@jaandrle"><title>`deka-dom-el` — Introduction</title><script src="https://flems.io/flems.html" type="text/javascript" charset="utf-8"></script></head><body><!--<dde:mark type="component" name="page" host="this"/>--><!--<dde:mark type="component" name="header" host="this"/>--><header><h1>`deka-dom-el` — Introduction</h1><p>Introducing a&nbsp;library and motivations.</p></header><nav><a href="https://github.com/jaandrle/deka-dom-el"><svg class="icon" viewbox="0 0 32 32"><!--<dde:mark type="component" name="iconGitHub" host="parentElement"/>--><path d="M 16,0.395c -8.836,0 -16,7.163 -16,16c 0,7.069 4.585,13.067 10.942,15.182c 0.8,0.148 1.094,-0.347 1.094,-0.77c 0,-0.381 -0.015,-1.642 -0.022,-2.979c -4.452,0.968 -5.391,-1.888 -5.391,-1.888c -0.728,-1.849 -1.776,-2.341 -1.776,-2.341c -1.452,-0.993 0.11,-0.973 0.11,-0.973c 1.606,0.113 2.452,1.649 2.452,1.649c 1.427,2.446 3.743,1.739 4.656,1.33c 0.143,-1.034 0.558,-1.74 1.016,-2.14c -3.554,-0.404 -7.29,-1.777 -7.29,-7.907c 0,-1.747 0.625,-3.174 1.649,-4.295c -0.166,-0.403 -0.714,-2.03 0.155,-4.234c 0,0 1.344,-0.43 4.401,1.64c 1.276,-0.355 2.645,-0.532 4.005,-0.539c 1.359,0.006 2.729,0.184 4.008,0.539c 3.054,-2.07 4.395,-1.64 4.395,-1.64c 0.871,2.204 0.323,3.831 0.157,4.234c 1.026,1.12 1.647,2.548 1.647,4.295c 0,6.145 -3.743,7.498 -7.306,7.895c 0.574,0.497 1.085,1.47 1.085,2.963c 0,2.141 -0.019,3.864 -0.019,4.391c 0,0.426 0.288,0.925 1.099,0.768c 6.354,-2.118 10.933,-8.113 10.933,-15.18c 0,-8.837 -7.164,-16 -16,-16Z"></path></svg>GitHub</a><a href="./" title="Introducing a&nbsp;library and motivations." class="current">1. Introduction</a><a href="elements" title="Basic concepts of elements modifications and creations.">2. Elements</a></nav><main><p>The library tries to provide pure JavaScript tool(s) to create reactive interfaces. </p><!--<dde:mark type="component" name="example" host="this"/>--><div id="code-duj4w" class="example"><pre><code class="language-javascript">import { el, S } from "https://cdn.jsdelivr.net/gh/jaandrle/deka-dom-el/dist/esm-with-signals.js";
 const clicks= S(0);
 document.body.append(
 	el().append(
@@ -12,4 +12,4 @@ document.body.append(
 		})
 	)
 );
-</code></pre></div><script>Flems(document.getElementById("code-5zrzl"), JSON.parse("{\"files\":[{\"name\":\".js\",\"content\":\"import { el, S } from \\\"https://cdn.jsdelivr.net/gh/jaandrle/deka-dom-el/dist/esm-with-signals.js\\\";\\nconst clicks= S(0);\\ndocument.body.append(\\n\\tel().append(\\n\\t\\tel(\\\"p\\\", S(()=>\\n\\t\\t\\t\\\"Hello World \\\"+\\\"🎉\\\".repeat(clicks())\\n\\t\\t)),\\n\\t\\tel(\\\"button\\\", {\\n\\t\\t\\ttype: \\\"button\\\",\\n\\t\\t\\tonclick: ()=> clicks(clicks()+1),\\n\\t\\t\\ttextContent: \\\"Fire\\\"\\n\\t\\t})\\n\\t)\\n);\\n\"}],\"toolbar\":false}"));</script></main></body></html>
+</code></pre></div><script>Flems(document.getElementById("code-duj4w"), JSON.parse("{\"files\":[{\"name\":\".js\",\"content\":\"import { el, S } from \\\"https://cdn.jsdelivr.net/gh/jaandrle/deka-dom-el/dist/esm-with-signals.js\\\";\\nconst clicks= S(0);\\ndocument.body.append(\\n\\tel().append(\\n\\t\\tel(\\\"p\\\", S(()=>\\n\\t\\t\\t\\\"Hello World \\\"+\\\"🎉\\\".repeat(clicks())\\n\\t\\t)),\\n\\t\\tel(\\\"button\\\", {\\n\\t\\t\\ttype: \\\"button\\\",\\n\\t\\t\\tonclick: ()=> clicks(clicks()+1),\\n\\t\\t\\ttextContent: \\\"Fire\\\"\\n\\t\\t})\\n\\t)\\n);\\n\"}],\"toolbar\":false}"));</script></main></body></html>

docs_src/components/example.html.js

@@ -47,6 +47,10 @@ function registerClientPart(page_id, registerClientFile){
 		el("script", { src: "https://flems.io/flems.html", type: "text/javascript", charset: "utf-8" }),
 		//★ el("script", { src: "https://cdn.jsdelivr.net/npm/shiki", defer: true }),
 	);
+	const d= el("div");
+	/** @param {HTMLDivElement} a */
+	const f= (a)=> a;
+	f(d); //←
 	//★ egisterClientFile(
 	//★  new URL("./example.js.js", import.meta.url),
 	//★  el("script", { type: "module" })

docs_src/elements.html.js

@@ -88,7 +88,7 @@ export function page({ pkg, info, path_target, pages, registerClientFile }){
 			el("p", "By default, the native JS has no good way to define HTML template using DOM API:"),
 			el(example, { src: new URL("./components/examples/nativeAppend.js", import.meta.url), page_id, registerClientFile }),
 			el("p").append(
-				"This library therefore ooverwrites the ", el("code", "append"), " method to always return parent element."
+				"This library therefore overwrites the ", el("code", "append"), " method of created elements to always return parent element."
 			),
 			el(example, { src: new URL("./components/examples/dekaAppend.js", import.meta.url), page_id, registerClientFile }),
 			

docs_src/layout/head.html.js

@@ -1,4 +1,4 @@
-import { el, scope } from "deka-dom-el";
+import { el, elNS, scope } from "deka-dom-el";
 /**
  * @param {object} def
  * @param {import("../types.d.ts").Info} def.info
@@ -66,7 +66,7 @@ function stylesheetHref(path_target, name){
 	return path_target.css.replace(path_target.root, "")+name+".css";
 }
 function iconGitHub(){
-	scope.namespace= "svg";
+	const el= elNS("http://www.w3.org/2000/svg");
 	return el("svg", { className: "icon", viewBox: "0 0 32 32" }).append(
 		el("path", { d: [ //see https://svg-path-visualizer.netlify.app/#M16%200.395c-8.836%200-16%207.163-16%2016%200%207.069%204.585%2013.067%2010.942%2015.182%200.8%200.148%201.094-0.347%201.094-0.77%200-0.381-0.015-1.642-0.022-2.979-4.452%200.968-5.391-1.888-5.391-1.888-0.728-1.849-1.776-2.341-1.776-2.341-1.452-0.993%200.11-0.973%200.11-0.973%201.606%200.113%202.452%201.649%202.452%201.649%201.427%202.446%203.743%201.739%204.656%201.33%200.143-1.034%200.558-1.74%201.016-2.14-3.554-0.404-7.29-1.777-7.29-7.907%200-1.747%200.625-3.174%201.649-4.295-0.166-0.403-0.714-2.030%200.155-4.234%200%200%201.344-0.43%204.401%201.64%201.276-0.355%202.645-0.532%204.005-0.539%201.359%200.006%202.729%200.184%204.008%200.539%203.054-2.070%204.395-1.64%204.395-1.64%200.871%202.204%200.323%203.831%200.157%204.234%201.026%201.12%201.647%202.548%201.647%204.295%200%206.145-3.743%207.498-7.306%207.895%200.574%200.497%201.085%201.47%201.085%202.963%200%202.141-0.019%203.864-0.019%204.391%200%200.426%200.288%200.925%201.099%200.768%206.354-2.118%2010.933-8.113%2010.933-15.18%200-8.837-7.164-16-16-16z
 			"M 16,0.395",

docs_src/types.d.ts

@@ -19,3 +19,9 @@ export type PageAttrs= {
 	registerClientFile: registerClientFile
 }
 
+import type { CustomHTMLTestElement } from "../examples/components/webComponent.js";
+declare global{
+	interface ddePublicElementTagNameMap{
+		["custom-test"]: CustomHTMLTestElement;
+	}
+}

examples/components/fullNameComponent.js

@@ -1,4 +1,4 @@
-import { style, el, on, S, scope } from '../exports.js';
+import { style, el, elNS, on, S, scope } from '../exports.js';
 const className= style.host(fullNameComponent).css`
 	:host form{
 		display: flex;
@@ -13,6 +13,7 @@ export function fullNameComponent(){
 	scope.host(on.connected(()=> console.log(fullNameComponent)));
 	scope.host(on.disconnected(()=> console.log(fullNameComponent)))
 
+	const elSVG= elNS("http://www.w3.org/2000/svg");
 	return el("div", { className }).append(
 		el("h2", "Simple form:"),
 		el("form", { onsubmit: ev=> ev.preventDefault() }).append(
@@ -26,11 +27,9 @@ export function fullNameComponent(){
 			": ",
 			el("#text", full_name)
 		),
-		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" })
-			)
+		elSVG("svg", { viewBox: "0 0 240 80", style: { height: "80px", display: "block" } }).append(
+			//elSVG("style", {  })
+			elSVG("text", { x: 20, y: 35, textContent: "Text" })
 		)
 	);
 }

examples/components/webComponent.js

@@ -1,11 +1,17 @@
-import { el, scope } from "../../index.js";
+import { el, on, scope } from "../../index.js";
 import { S } from "../../signals.js";
 const { hasOwnProperty }= Object.prototype;
 
+/**
+ * @typedef CustomHTMLTestElementInterface
+ * @type {object}
+ * @property {string} name
+ * */
 /**
  * Compatible with `npx-wca test/components/webComponent.js`
  * */
 export class CustomHTMLTestElement extends HTMLElement{
+	static tagName= "custom-test";
 	static get observedAttributes(){
 		return [ "name", "pre-name" ];
 	}
@@ -28,38 +34,25 @@ export class CustomHTMLTestElement extends HTMLElement{
 			el("#text", { textContent: name }),
 			el("#text", { textContent: test }),
 			el("#text", { textContent: preName }),
+			el("button", { type: "button", textContent: "pre-name", onclick: ()=> preName("Ahoj") })
 		);
 	}
+	
+	get name(){ return this.getAttribute("name"); }
+	set name(value){ this.setAttribute("name", value); }
+	get preName(){ return this.getAttribute("pre-name"); }
+	set preName(value){ this.setAttribute("pre-name", value); }
 }
 // https://gist.github.com/WebReflection/ec9f6687842aa385477c4afca625bbf4
-customElementsAssign(
-	CustomHTMLTestElement,
-	reflectObservedAttributes,
-	lifecycleToEvents,
-);
-customElements.define("custom-test", CustomHTMLTestElement);
+lifecycleToEvents(CustomHTMLTestElement)
+customElements.define(CustomHTMLTestElement.tagName, CustomHTMLTestElement);
 
 function customElementRender(_this, render){
-	scope.push({ scope: _this, host: (...a)=> a.length ? a[0](_this) : _this });
+	scope.push({ scope: _this, host: (...a)=> a.length ? a[0](_this) : _this, inherit_host: true });
 	const out= render(_this);
 	scope.pop();
 	return out;
 }
-/** @returns {HTMLElement} */
-function customElementsAssign(class_base, ...automatize){
-	automatize.forEach(a=> a(class_base));
-}
-function reflectObservedAttributes(c){
-	for(const name of c.observedAttributes){
-		const name_camel= name.replace(/([a-z])-([a-z])/g, (_, l, r)=> l+r.toUpperCase());
-		if(hasOwnProperty.call(c.prototype, name_camel))
-			continue;
-		Reflect.defineProperty(c.prototype, name_camel, {
-			get(){ return this.getAttribute(name); },
-			set(value){ this.setAttribute(name, value); }
-		});
-	}
-}
 function lifecycleToEvents(class_declaration){
 	for (const name of [ "connected", "disconnected" ])
 		wrapMethod(class_declaration.prototype, name+"Callback", function(target, thisArg, detail){

examples/index.js

@@ -8,5 +8,5 @@ document.body.append(
 	el("h1", "Experiments:"),
 	el(fullNameComponent),
 	el(todosComponent),
-	el(customElements.getName(CustomHTMLTestElement), { name: "attr" })
+	el(CustomHTMLTestElement.tagName, { name: "attr" })
 );

index.d.ts

@@ -1,16 +1,23 @@
+type CustomElementTagNameMap= { '#text': Text, '#comment': Comment }
+declare global {
+	interface ddePublicElementTagNameMap{
+	}
+}
+type SupportedElement=
+	  HTMLElementTagNameMap[keyof HTMLElementTagNameMap]
+	| SVGElementTagNameMap[keyof SVGElementTagNameMap]
+	| MathMLElementTagNameMap[keyof MathMLElementTagNameMap]
+	| CustomElementTagNameMap[keyof CustomElementTagNameMap]
+	| ddePublicElementTagNameMap[keyof ddePublicElementTagNameMap];
 declare global {
 	type ddeComponentAttributes= Record<any, any> | undefined | string;
-	type ddeElementModifier<El extends HTMLElement | SVGElement | Comment | DocumentFragment>= (element: El)=> El;
+	type ddeElementModifier<El extends SupportedElement | DocumentFragment>= (element: El)=> El;
 }
-type ElementTagNameMap= HTMLElementTagNameMap & { // & SVGElementTagNameMap
-	'#text': Text
-}
-type Element= ElementTagNameMap[keyof ElementTagNameMap];
 type AttrsModified= {
 	/**
-	 * In fact argumen for `*.setAttribute("style", *)`.
+	 * Use string like in HTML (internally uses `*.setAttribute("style", *)`), or object representation (like DOM API).
 	 */
-	style: string
+	style: string | Partial<CSSStyleDeclaration>
 	/**
 	 * Provide option to add/remove/toggle CSS clasess (index of object) using 1/0/-1. In fact `el.classList.toggle(class_name)` for `-1` and `el.classList.toggle(class_name, Boolean(...))` for others.
 	 */
@@ -32,24 +39,22 @@ type AttrsModified= {
  * There is added support for `data[A-Z].*`/`aria[A-Z].*` to be converted to the kebab-case alternatives.
  * @private
  */
-type ElementAttributes<T extends keyof ElementTagNameMap | ElementTagNameMap[keyof ElementTagNameMap]>=
-	T extends keyof ElementTagNameMap ?
-	Omit<ElementTagNameMap[T],"classList"|"className"> & AttrsModified :
-	Omit<T,"classList"|"className"> & AttrsModified;
-export function assign<El extends Element>(element: El, ...attrs_array: Partial<ElementAttributes<El>>[]): El
+type ElementAttributes<T extends SupportedElement>= Omit<T,keyof AttrsModified> & AttrsModified;
+export function assign<El extends SupportedElement>(element: El, ...attrs_array: Partial<ElementAttributes<El>>[]): El
 
-export function el<TAG extends keyof ElementTagNameMap>(
+type ExtendedHTMLElementTagNameMap= HTMLElementTagNameMap & CustomElementTagNameMap & ddePublicElementTagNameMap
+export function el<TAG extends keyof ExtendedHTMLElementTagNameMap>(
 	tag_name: TAG,
-	attrs?: Partial<ElementAttributes<ElementTagNameMap[TAG]>>,
-	...modifiers: ddeElementModifier<ElementTagNameMap[TAG]>[]
-): ElementTagNameMap[TAG]
+	attrs?: string | Partial<ElementAttributes<ExtendedHTMLElementTagNameMap[TAG]>>,
+	...modifiers: ddeElementModifier<ExtendedHTMLElementTagNameMap[TAG]>[]
+): ExtendedHTMLElementTagNameMap[TAG]
 export function el<T>(
 	tag_name?: "<>",
 ): DocumentFragment
 
 export function el<
 	A extends ddeComponentAttributes,
-	C extends (attr: A)=> Element | DocumentFragment>(
+	C extends (attr: A)=> SupportedElement | DocumentFragment>(
 	fComponent: C,
 	attrs?: A,
 	...modifiers: ddeElementModifier<ReturnType<C>>[]
@@ -57,30 +62,63 @@ export function el<
 
 export function el(
 	tag_name: string,
-	attrs?: Record<string, any>,
-	...modifiers: ddeElementModifier<HTMLElement | SVGElement>[]
+	attrs?: string | Record<string, any>,
+	...modifiers: ddeElementModifier<HTMLElement>[]
 ): HTMLElement
 
-export function dispatchEvent(element: HTMLElement, name: keyof DocumentEventMap): void;
-export function dispatchEvent(element: HTMLElement, name: string, data: any): void;
+export function elNS(
+	namespace: "http://www.w3.org/2000/svg"
+): <TAG extends keyof SVGElementTagNameMap, KEYS extends keyof SVGElementTagNameMap[TAG] & { d: string }>(
+	tag_name: TAG,
+	attrs?: string | Partial<{ [key in KEYS]: SVGElementTagNameMap[TAG][key] | string | number | boolean }>,
+	...modifiers: ddeElementModifier<SVGElementTagNameMap[TAG]>[]
+)=> SVGElementTagNameMap[TAG]
+export function elNS(
+	namespace: "http://www.w3.org/1998/Math/MathML"
+): <TAG extends keyof MathMLElementTagNameMap, KEYS extends keyof MathMLElementTagNameMap[TAG] & { d: string }>(
+	tag_name: TAG,
+	attrs?: string | Partial<{ [key in KEYS]: MathMLElementTagNameMap[TAG][key] | string | number | boolean }>,
+	...modifiers: ddeElementModifier<MathMLElementTagNameMap[TAG]>[]
+)=> MathMLElementTagNameMap[TAG]
+export function elNS(
+	namespace: string
+): (
+	tag_name: string,
+	attrs?: string | Record<string, any>,
+	...modifiers: ddeElementModifier<SupportedElement>[]
+)=> SupportedElement
+
+export function dispatchEvent(element: SupportedElement, name: keyof DocumentEventMap): void;
+export function dispatchEvent(element: SupportedElement, name: string, data: any): void;
 interface On{
+	/** Listens to the DOM event. See {@link Document.addEventListener} */
 	<
-		EE extends ddeElementModifier<Element>,
+		EE extends ddeElementModifier<SupportedElement>,
 		El extends ( EE extends ddeElementModifier<infer El> ? El : never ),
 		Event extends keyof DocumentEventMap>(
 			type: Event,
 			listener: (this: El, ev: DocumentEventMap[Event]) => any,
 			options?: AddEventListenerOptions
 		) : EE;
+	/** Listens to the element is connected to the live DOM. In case of custom elements uses [`connectedCallback`](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements#custom_element_lifecycle_callbacks), or {@link MutationObserver} else where */
 	connected<
-		EE extends ddeElementModifier<Element>,
+		EE extends ddeElementModifier<SupportedElement>,
 		El extends ( EE extends ddeElementModifier<infer El> ? El : never )
 		>(
 			listener: (el: El) => any,
 			options?: AddEventListenerOptions
 		) : EE;
+	/** Listens to the element is disconnected from the live DOM. In case of custom elements uses [`disconnectedCallback`](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements#custom_element_lifecycle_callbacks), or {@link MutationObserver} else where */
 	disconnected<
-		EE extends ddeElementModifier<Element>,
+		EE extends ddeElementModifier<SupportedElement>,
+		El extends ( EE extends ddeElementModifier<infer El> ? El : never )
+		>(
+			listener: (el: El) => any,
+			options?: AddEventListenerOptions
+		) : EE;
+	/** Listens to the element attribute changes. In case of custom elements uses [`attributeChangedCallback`](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements#custom_element_lifecycle_callbacks), or {@link MutationObserver} else where */
+	attributeChanged<
+		EE extends ddeElementModifier<SupportedElement>,
 		El extends ( EE extends ddeElementModifier<infer El> ? El : never )
 		>(
 			listener: (el: El) => any,
@@ -89,125 +127,315 @@ interface On{
 }
 export const on: On;
 
+type Scope= { scope: Node | Function | Object, host: ddeElementModifier<any>, prevent: boolean, inherit_host: boolean, }
+/** Current scope created last time the `el(Function)` was invoke. (Or {@link scope.push}) */
 export const scope: {
-	namespace: string,
+	current: Scope,
+	/** Stops all automatizations. E. g. signals used as attributes in current scope
+	 * registers removing these listeners (and clean signal if no other listeners are detected)
+	 * on `disconnected` event. */
+	preventDefault<T extends boolean>(prevent: T): T,
+	/**
+	 * This represents reference to the current host element — `scope.host()`.
+	 * It can be also used to register Modifier (function to be called when component is initized)
+	 * — `scope.host(on.connected(console.log))`.
+	 * */
 	host: ddeElementModifier<any>,
-	elNamespace: (ns: string)=> ({ append(...els: (HTMLElement | SVGElement)[]): HTMLElement | SVGElement | DocumentFragment })
+	
+	state: Scope[],
+	/** Adds new child scope. All attributes are inherited by default. */
+	push(scope: Partial<Scope>): ReturnType<Array<Scope>["push"]>,
+	/** Removes last/current child scope. */
+	pop(): ReturnType<Array<Scope>["pop"]>,
 };
 
-//TODO for SVG
+/*
+ * TODO TypeScript HACK (better way?)
+ * this doesnt works
+ * ```ts
+ * interface element<el> extends Node{
+ * 	prototype: el;
+ * 	append(...els: (SupportedElement | DocumentFragment | string | element<SupportedElement | DocumentFragment>)[]): el
+ * }
+ * export function el<T>(
+ * 	tag_name?: "<>",
+ * ): element<DocumentFragment>
+ * ```
+ * …as its complains here
+ * ```ts
+ * const d= el("div");
+ * const f= (a: HTMLDivElement)=> a;
+ * f(d); //←
+ * document.head.append( //←
+ * 	el("script", { src: "https://flems.io/flems.html", type: "text/javascript", charset: "utf-8" }),
+ * );
+ * ```
+ * TODO for SVG
+ * */
+type ddeAppend<el>= (...nodes: (Node | string)[])=> el;
 declare global{
-	interface HTMLDivElement{ append(...nodes: (Node | string)[]): HTMLDivElement; }
-	interface HTMLAnchorElement{ append(...nodes: (Node | string)[]): HTMLAnchorElement; }
-	interface HTMLElement{ append(...nodes: (Node | string)[]): HTMLElement; }
-	interface HTMLElement{ append(...nodes: (Node | string)[]): HTMLElement; }
-	interface HTMLAreaElement{ append(...nodes: (Node | string)[]): HTMLAreaElement; }
-	interface HTMLElement{ append(...nodes: (Node | string)[]): HTMLElement; }
-	interface HTMLElement{ append(...nodes: (Node | string)[]): HTMLElement; }
-	interface HTMLAudioElement{ append(...nodes: (Node | string)[]): HTMLAudioElement; }
-	interface HTMLElement{ append(...nodes: (Node | string)[]): HTMLElement; }
-	interface HTMLBaseElement{ append(...nodes: (Node | string)[]): HTMLBaseElement; }
-	interface HTMLElement{ append(...nodes: (Node | string)[]): HTMLElement; }
-	interface HTMLElement{ append(...nodes: (Node | string)[]): HTMLElement; }
-	interface HTMLQuoteElement{ append(...nodes: (Node | string)[]): HTMLQuoteElement; }
-	interface HTMLBodyElement{ append(...nodes: (Node | string)[]): HTMLBodyElement; }
-	interface HTMLBRElement{ append(...nodes: (Node | string)[]): HTMLBRElement; }
-	interface HTMLButtonElement{ append(...nodes: (Node | string)[]): HTMLButtonElement; }
-	interface HTMLCanvasElement{ append(...nodes: (Node | string)[]): HTMLCanvasElement; }
-	interface HTMLTableCaptionElement{ append(...nodes: (Node | string)[]): HTMLTableCaptionElement; }
-	interface HTMLElement{ append(...nodes: (Node | string)[]): HTMLElement; }
-	interface HTMLElement{ append(...nodes: (Node | string)[]): HTMLElement; }
-	interface HTMLTableColElement{ append(...nodes: (Node | string)[]): HTMLTableColElement; }
-	interface HTMLTableColElement{ append(...nodes: (Node | string)[]): HTMLTableColElement; }
-	interface HTMLDataElement{ append(...nodes: (Node | string)[]): HTMLDataElement; }
-	interface HTMLDataListElement{ append(...nodes: (Node | string)[]): HTMLDataListElement; }
-	interface HTMLElement{ append(...nodes: (Node | string)[]): HTMLElement; }
-	interface HTMLModElement{ append(...nodes: (Node | string)[]): HTMLModElement; }
-	interface HTMLDetailsElement{ append(...nodes: (Node | string)[]): HTMLDetailsElement; }
-	interface HTMLElement{ append(...nodes: (Node | string)[]): HTMLElement; }
-	interface HTMLDialogElement{ append(...nodes: (Node | string)[]): HTMLDialogElement; }
-	interface HTMLDivElement{ append(...nodes: (Node | string)[]): HTMLDivElement; }
-	interface HTMLDListElement{ append(...nodes: (Node | string)[]): HTMLDListElement; }
-	interface HTMLElement{ append(...nodes: (Node | string)[]): HTMLElement; }
-	interface HTMLElement{ append(...nodes: (Node | string)[]): HTMLElement; }
-	interface HTMLEmbedElement{ append(...nodes: (Node | string)[]): HTMLEmbedElement; }
-	interface HTMLFieldSetElement{ append(...nodes: (Node | string)[]): HTMLFieldSetElement; }
-	interface HTMLElement{ append(...nodes: (Node | string)[]): HTMLElement; }
-	interface HTMLElement{ append(...nodes: (Node | string)[]): HTMLElement; }
-	interface HTMLElement{ append(...nodes: (Node | string)[]): HTMLElement; }
-	interface HTMLFormElement{ append(...nodes: (Node | string)[]): HTMLFormElement; }
-	interface HTMLHeadingElement{ append(...nodes: (Node | string)[]): HTMLHeadingElement; }
-	interface HTMLHeadingElement{ append(...nodes: (Node | string)[]): HTMLHeadingElement; }
-	interface HTMLHeadingElement{ append(...nodes: (Node | string)[]): HTMLHeadingElement; }
-	interface HTMLHeadingElement{ append(...nodes: (Node | string)[]): HTMLHeadingElement; }
-	interface HTMLHeadingElement{ append(...nodes: (Node | string)[]): HTMLHeadingElement; }
-	interface HTMLHeadingElement{ append(...nodes: (Node | string)[]): HTMLHeadingElement; }
-	interface HTMLHeadElement{ append(...nodes: (Node | string)[]): HTMLHeadElement; }
-	interface HTMLElement{ append(...nodes: (Node | string)[]): HTMLElement; }
-	interface HTMLElement{ append(...nodes: (Node | string)[]): HTMLElement; }
-	interface HTMLHRElement{ append(...nodes: (Node | string)[]): HTMLHRElement; }
-	interface HTMLHtmlElement{ append(...nodes: (Node | string)[]): HTMLHtmlElement; }
-	interface HTMLElement{ append(...nodes: (Node | string)[]): HTMLElement; }
-	interface HTMLIFrameElement{ append(...nodes: (Node | string)[]): HTMLIFrameElement; }
-	interface HTMLImageElement{ append(...nodes: (Node | string)[]): HTMLImageElement; }
-	interface HTMLInputElement{ append(...nodes: (Node | string)[]): HTMLInputElement; }
-	interface HTMLModElement{ append(...nodes: (Node | string)[]): HTMLModElement; }
-	interface HTMLElement{ append(...nodes: (Node | string)[]): HTMLElement; }
-	interface HTMLLabelElement{ append(...nodes: (Node | string)[]): HTMLLabelElement; }
-	interface HTMLLegendElement{ append(...nodes: (Node | string)[]): HTMLLegendElement; }
-	interface HTMLLIElement{ append(...nodes: (Node | string)[]): HTMLLIElement; }
-	interface HTMLLinkElement{ append(...nodes: (Node | string)[]): HTMLLinkElement; }
-	interface HTMLElement{ append(...nodes: (Node | string)[]): HTMLElement; }
-	interface HTMLMapElement{ append(...nodes: (Node | string)[]): HTMLMapElement; }
-	interface HTMLElement{ append(...nodes: (Node | string)[]): HTMLElement; }
-	interface HTMLMenuElement{ append(...nodes: (Node | string)[]): HTMLMenuElement; }
-	interface HTMLMetaElement{ append(...nodes: (Node | string)[]): HTMLMetaElement; }
-	interface HTMLMeterElement{ append(...nodes: (Node | string)[]): HTMLMeterElement; }
-	interface HTMLElement{ append(...nodes: (Node | string)[]): HTMLElement; }
-	interface HTMLElement{ append(...nodes: (Node | string)[]): HTMLElement; }
-	interface HTMLObjectElement{ append(...nodes: (Node | string)[]): HTMLObjectElement; }
-	interface HTMLOListElement{ append(...nodes: (Node | string)[]): HTMLOListElement; }
-	interface HTMLOptGroupElement{ append(...nodes: (Node | string)[]): HTMLOptGroupElement; }
-	interface HTMLOptionElement{ append(...nodes: (Node | string)[]): HTMLOptionElement; }
-	interface HTMLOutputElement{ append(...nodes: (Node | string)[]): HTMLOutputElement; }
-	interface HTMLParagraphElement{ append(...nodes: (Node | string)[]): HTMLParagraphElement; }
-	interface HTMLPictureElement{ append(...nodes: (Node | string)[]): HTMLPictureElement; }
-	interface HTMLPreElement{ append(...nodes: (Node | string)[]): HTMLPreElement; }
-	interface HTMLProgressElement{ append(...nodes: (Node | string)[]): HTMLProgressElement; }
-	interface HTMLQuoteElement{ append(...nodes: (Node | string)[]): HTMLQuoteElement; }
-	interface HTMLElement{ append(...nodes: (Node | string)[]): HTMLElement; }
-	interface HTMLElement{ append(...nodes: (Node | string)[]): HTMLElement; }
-	interface HTMLElement{ append(...nodes: (Node | string)[]): HTMLElement; }
-	interface HTMLElement{ append(...nodes: (Node | string)[]): HTMLElement; }
-	interface HTMLElement{ append(...nodes: (Node | string)[]): HTMLElement; }
-	interface HTMLScriptElement{ append(...nodes: (Node | string)[]): HTMLScriptElement; }
-	interface HTMLElement{ append(...nodes: (Node | string)[]): HTMLElement; }
-	interface HTMLSelectElement{ append(...nodes: (Node | string)[]): HTMLSelectElement; }
-	interface HTMLSlotElement{ append(...nodes: (Node | string)[]): HTMLSlotElement; }
-	interface HTMLElement{ append(...nodes: (Node | string)[]): HTMLElement; }
-	interface HTMLSourceElement{ append(...nodes: (Node | string)[]): HTMLSourceElement; }
-	interface HTMLSpanElement{ append(...nodes: (Node | string)[]): HTMLSpanElement; }
-	interface HTMLElement{ append(...nodes: (Node | string)[]): HTMLElement; }
-	interface HTMLStyleElement{ append(...nodes: (Node | string)[]): HTMLStyleElement; }
-	interface HTMLElement{ append(...nodes: (Node | string)[]): HTMLElement; }
-	interface HTMLElement{ append(...nodes: (Node | string)[]): HTMLElement; }
-	interface HTMLElement{ append(...nodes: (Node | string)[]): HTMLElement; }
-	interface HTMLTableElement{ append(...nodes: (Node | string)[]): HTMLTableElement; }
-	interface HTMLTableSectionElement{ append(...nodes: (Node | string)[]): HTMLTableSectionElement; }
-	interface HTMLTableCellElement{ append(...nodes: (Node | string)[]): HTMLTableCellElement; }
-	interface HTMLTemplateElement{ append(...nodes: (Node | string)[]): HTMLTemplateElement; }
-	interface HTMLTextAreaElement{ append(...nodes: (Node | string)[]): HTMLTextAreaElement; }
-	interface HTMLTableSectionElement{ append(...nodes: (Node | string)[]): HTMLTableSectionElement; }
-	interface HTMLTableCellElement{ append(...nodes: (Node | string)[]): HTMLTableCellElement; }
-	interface HTMLTableSectionElement{ append(...nodes: (Node | string)[]): HTMLTableSectionElement; }
-	interface HTMLTimeElement{ append(...nodes: (Node | string)[]): HTMLTimeElement; }
-	interface HTMLTitleElement{ append(...nodes: (Node | string)[]): HTMLTitleElement; }
-	interface HTMLTableRowElement{ append(...nodes: (Node | string)[]): HTMLTableRowElement; }
-	interface HTMLTrackElement{ append(...nodes: (Node | string)[]): HTMLTrackElement; }
-	interface HTMLElement{ append(...nodes: (Node | string)[]): HTMLElement; }
-	interface HTMLUListElement{ append(...nodes: (Node | string)[]): HTMLUListElement; }
-	interface HTMLElement{ append(...nodes: (Node | string)[]): HTMLElement; }
-	interface HTMLVideoElement{ append(...nodes: (Node | string)[]): HTMLVideoElement; }
-	interface HTMLElement{ append(...nodes: (Node | string)[]): HTMLElement; }
-	interface DocumentFragment{ append(...nodes: (Node | string)[]): DocumentFragment; }
+	interface HTMLAnchorElement{
+		/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
+		append: ddeAppend<HTMLAnchorElement>;
+	}
+	interface HTMLElement{
+		/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
+		append: ddeAppend<HTMLElement>;
+	}
+	interface HTMLAreaElement{
+		/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
+		append: ddeAppend<HTMLAreaElement>;
+	}
+	interface HTMLAudioElement{
+		/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
+		append: ddeAppend<HTMLAudioElement>;
+	}
+	interface HTMLBaseElement{
+		/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
+		append: ddeAppend<HTMLBaseElement>;
+	}
+	interface HTMLQuoteElement{
+		/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
+		append: ddeAppend<HTMLQuoteElement>;
+	}
+	interface HTMLBodyElement{
+		/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
+		append: ddeAppend<HTMLBodyElement>;
+	}
+	interface HTMLBRElement{
+		/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
+		append: ddeAppend<HTMLBRElement>;
+	}
+	interface HTMLButtonElement{
+		/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
+		append: ddeAppend<HTMLButtonElement>;
+	}
+	interface HTMLCanvasElement{
+		/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
+		append: ddeAppend<HTMLCanvasElement>;
+	}
+	interface HTMLTableCaptionElement{
+		/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
+		append: ddeAppend<HTMLTableCaptionElement>;
+	}
+	interface HTMLTableColElement{
+		/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
+		append: ddeAppend<HTMLTableColElement>;
+	}
+	interface HTMLTableColElement{
+		/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
+		append: ddeAppend<HTMLTableColElement>;
+	}
+	interface HTMLDataElement{
+		/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
+		append: ddeAppend<HTMLDataElement>;
+	}
+	interface HTMLDataListElement{
+		/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
+		append: ddeAppend<HTMLDataListElement>;
+	}
+	interface HTMLModElement{
+		/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
+		append: ddeAppend<HTMLModElement>;
+	}
+	interface HTMLDetailsElement{
+		/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
+		append: ddeAppend<HTMLDetailsElement>;
+	}
+	interface HTMLDialogElement{
+		/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
+		append: ddeAppend<HTMLDialogElement>;
+	}
+	interface HTMLDivElement{
+		/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
+		append: ddeAppend<HTMLDivElement>;
+	}
+	interface HTMLDListElement{
+		/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
+		append: ddeAppend<HTMLDListElement>;
+	}
+	interface HTMLEmbedElement{
+		/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
+		append: ddeAppend<HTMLEmbedElement>;
+	}
+	interface HTMLFieldSetElement{
+		/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
+		append: ddeAppend<HTMLFieldSetElement>;
+	}
+	interface HTMLFormElement{
+		/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
+		append: ddeAppend<HTMLFormElement>;
+	}
+	interface HTMLHeadingElement{
+		/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
+		append: ddeAppend<HTMLHeadingElement>;
+	}
+	interface HTMLHeadElement{
+		/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
+		append: ddeAppend<HTMLHeadElement>;
+	}
+	interface HTMLHRElement{
+		/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
+		append: ddeAppend<HTMLHRElement>;
+	}
+	interface HTMLHtmlElement{
+		/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
+		append: ddeAppend<HTMLHtmlElement>;
+	}
+	interface HTMLIFrameElement{
+		/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
+		append: ddeAppend<HTMLIFrameElement>;
+	}
+	interface HTMLImageElement{
+		/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
+		append: ddeAppend<HTMLImageElement>;
+	}
+	interface HTMLInputElement{
+		/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
+		append: ddeAppend<HTMLInputElement>;
+	}
+	interface HTMLLabelElement{
+		/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
+		append: ddeAppend<HTMLLabelElement>;
+	}
+	interface HTMLLegendElement{
+		/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
+		append: ddeAppend<HTMLLegendElement>;
+	}
+	interface HTMLLIElement{
+		/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
+		append: ddeAppend<HTMLLIElement>;
+	}
+	interface HTMLLinkElement{
+		/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
+		append: ddeAppend<HTMLLinkElement>;
+	}
+	interface HTMLMapElement{
+		/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
+		append: ddeAppend<HTMLMapElement>;
+	}
+	interface HTMLMenuElement{
+		/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
+		append: ddeAppend<HTMLMenuElement>;
+	}
+	interface HTMLMetaElement{
+		/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
+		append: ddeAppend<HTMLMetaElement>;
+	}
+	interface HTMLMeterElement{
+		/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
+		append: ddeAppend<HTMLMeterElement>;
+	}
+	interface HTMLObjectElement{
+		/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
+		append: ddeAppend<HTMLObjectElement>;
+	}
+	interface HTMLOListElement{
+		/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
+		append: ddeAppend<HTMLOListElement>;
+	}
+	interface HTMLOptGroupElement{
+		/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
+		append: ddeAppend<HTMLOptGroupElement>;
+	}
+	interface HTMLOptionElement{
+		/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
+		append: ddeAppend<HTMLOptionElement>;
+	}
+	interface HTMLOutputElement{
+		/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
+		append: ddeAppend<HTMLOutputElement>;
+	}
+	interface HTMLParagraphElement{
+		/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
+		append: ddeAppend<HTMLParagraphElement>;
+	}
+	interface HTMLPictureElement{
+		/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
+		append: ddeAppend<HTMLPictureElement>;
+	}
+	interface HTMLPreElement{
+		/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
+		append: ddeAppend<HTMLPreElement>;
+	}
+	interface HTMLProgressElement{
+		/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
+		append: ddeAppend<HTMLProgressElement>;
+	}
+	interface HTMLScriptElement{
+		/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
+		append: ddeAppend<HTMLScriptElement>;
+	}
+	interface HTMLSelectElement{
+		/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
+		append: ddeAppend<HTMLSelectElement>;
+	}
+	interface HTMLSlotElement{
+		/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
+		append: ddeAppend<HTMLSlotElement>;
+	}
+	interface HTMLSourceElement{
+		/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
+		append: ddeAppend<HTMLSourceElement>;
+	}
+	interface HTMLSpanElement{
+		/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
+		append: ddeAppend<HTMLSpanElement>;
+	}
+	interface HTMLStyleElement{
+		/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
+		append: ddeAppend<HTMLStyleElement>;
+	}
+	interface HTMLTableElement{
+		/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
+		append: ddeAppend<HTMLTableElement>;
+	}
+	interface HTMLTableSectionElement{
+		/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
+		append: ddeAppend<HTMLTableSectionElement>;
+	}
+	interface HTMLTableCellElement{
+		/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
+		append: ddeAppend<HTMLTableCellElement>;
+	}
+	interface HTMLTemplateElement{
+		/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
+		append: ddeAppend<HTMLTemplateElement>;
+	}
+	interface HTMLTextAreaElement{
+		/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
+		append: ddeAppend<HTMLTextAreaElement>;
+	}
+	interface HTMLTableCellElement{
+		/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
+		append: ddeAppend<HTMLTableCellElement>;
+	}
+	interface HTMLTimeElement{
+		/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
+		append: ddeAppend<HTMLTimeElement>;
+	}
+	interface HTMLTitleElement{
+		/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
+		append: ddeAppend<HTMLTitleElement>;
+	}
+	interface HTMLTableRowElement{
+		/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
+		append: ddeAppend<HTMLTableRowElement>;
+	}
+	interface HTMLTrackElement{
+		/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
+		append: ddeAppend<HTMLTrackElement>;
+	}
+	interface HTMLUListElement{
+		/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
+		append: ddeAppend<HTMLUListElement>;
+	}
+	interface HTMLVideoElement{
+		/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
+		append: ddeAppend<HTMLVideoElement>;
+	}
+	interface DocumentFragment{
+		/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
+		append: ddeAppend<DocumentFragment>;
+	}
 }

index.js

@@ -1,7 +1,2 @@
-if(typeof document.createDocumentFragment().append()==="undefined")
-	[ HTMLElement, SVGElement, DocumentFragment ].forEach(c=> {
-		const { append }= c.prototype;
-		c.prototype.append= function(...els){ append.apply(this, els); return this; };
-	});
 export * from "./src/dom.js";
 export * from "./src/events.js";

jsdom.js

@@ -19,11 +19,6 @@ export function register(dom, keys_aditional= []){
 		globalThis.window= w;
 		w.console= globalThis.console;
 	}
-	if(typeof document.createDocumentFragment().append()==="undefined")
-		[ HTMLElement, SVGElement, DocumentFragment ].forEach(c=> {
-			const { append }= c.prototype;
-			c.prototype.append= function(...els){ append.apply(this, els); return this; };
-		});
 	dom_last= dom;
 
 	return import("./index.js");

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "deka-dom-el",
-	"version": "0.6.1",
+	"version": "0.7.0",
 	"description": "A low-code library that simplifies the creation of native DOM elements/components using small wrappers and tweaks.",
 	"author": "Jan Andrle <andrle.jan@centrum.cz>",
 	"license": "MIT",
@@ -63,7 +63,7 @@
 		},
 		{
 			"path": "./signals.js",
-			"limit": "8.5 kB",
+			"limit": "11 kB",
 			"gzip": false
 		},
 		{
@@ -75,6 +75,11 @@
 			"path": "./examples/components/webComponent.js",
 			"limit": "12.5 kB",
 			"gzip": false
+		},
+		{
+			"path": "./examples/components/webComponent.js",
+			"limit": "5 kB",
+			"gzip": true
 		}
 	],
 	"modifyEsbuildConfig": {

signals.d.ts

@@ -30,6 +30,10 @@ interface S {
 	 *		by `S.clear`.
 	 * */
 	<V, A extends Actions<V>>(value: V, actions?: A): Signal<V, A>;
+	/**
+	 * Computations signal. This creates a signal which is computed from other signals.
+	 * */
+	<V>(computation: ()=> V): Signal<V, {}>
 	action<S extends Signal<any, Actions<any>>, A extends (S extends Signal<any, infer A> ? A : never), N extends keyof A>(
 		signal: S,
 		name: N,
@@ -41,7 +45,17 @@ interface S {
 		signal: SymbolSignal;
 		onclear: SymbolOnclear;
 	}
-	el<S extends any, T extends HTMLElement>(signal: Signal<S, any>, el: (v: S)=> T): T;
+	/**
+	 * Reactive element, which is rendered based on the given signal.
+	 * ```js
+	 * S.el(signal, value=> value ? el("b", "True") : el("i", "False"));
+	 * S.el(listS, list=> list.map(li=> el("li", li)));
+	 * ```
+	 * */
+	el<S extends any>(signal: Signal<S, any>, el: (v: S)=> Element | Element[]): DocumentFragment;
+
+	/** Mirrors element attributes for current host (both way).  */
+	attribute<T>(name: string, initial?: T): Signal<T, {}>
 }
 export const S: S;
 declare global {

src/dom.js

@@ -1,47 +1,32 @@
 import { signals } from "./signals-common.js";
 
-/** @type {{ scope: object, prevent: boolean, namespace: "html"|string, host: function }[]} */
+/** @type {{ scope: object, prevent: boolean, host: function }[]} */
 const scopes= [ {
 	scope: document.body,
-	namespace: "html",
 	host: c=> c ? c(document.body) : document.body,
-	prevent: true
+	prevent: true,
+	inherit_host: false,
 } ];
-const namespaceHelper= ns=> ns==="svg" ? "http://www.w3.org/2000/svg" : ns;
 export const scope= {
 	get current(){ return scopes[scopes.length-1]; },
 	get host(){ return this.current.host; },
-	get namespace(){ return this.current.namespace; },
-	set namespace(namespace){ return ( this.current.namespace= namespaceHelper(namespace)); },
 	
 	preventDefault(){
 		const { current }= this;
 		current.prevent= true;
 		return current;
 	},
-	elNamespace(namespace){
-		const ns= this.namespace;
-		this.namespace= namespace;
-		return {
-			append(...els){
-				scope.namespace= ns;
-				if(els.length===1) return els[0];
-				const f= document.createDocumentFragment();
-				return f.append(...els);
-			}
-		};
-	},
 	
 	get state(){ return [ ...scopes ]; },
 	push(s= {}){
-		if(s.namespace) s.namespace= namespaceHelper(s.namespace);
 		return scopes.push(Object.assign({}, this.current, { prevent: false }, s));
 	},
 	pop(){ return scopes.pop(); },
 };
+let namespace;
 export function createElement(tag, attributes, ...modifiers){
+	/* jshint maxcomplexity: 16 */
 	const s= signals(this);
-	const { namespace }= scope;
 	let scoped= 0;
 	let el, el_host;
 	//TODO Array.isArray(tag) ⇒ set key (cache els)
@@ -50,27 +35,62 @@ export function createElement(tag, attributes, ...modifiers){
 	switch(true){
 		case typeof tag==="function": {
 			scoped= 1;
-			scope.push({ scope: tag, host: c=> c ? (scoped===1 ? modifiers.unshift(c) : c(el_host), undefined) : el_host });
+			const { inherit_host, host: hostParent }= scope.current;
+			const host= inherit_host ? hostParent : c=> c ? (scoped===1 ? modifiers.unshift(c) : c(el_host), undefined) : el_host;
+			scope.push({ scope: tag, host, inherit_host });
 			el= tag(attributes || undefined);
 			const is_fragment= el instanceof DocumentFragment;
-			const el_mark= document.createComment(`<dde:mark type="component" name="${tag.name}" host="${is_fragment ? "this" : "parentElement"}"/>`);
+			const el_mark= createElement.mark({
+				type: "component",
+				name: tag.name,
+				host: is_fragment ? "this" : ( el.nodeName==="#comment" ? "previousLater" : "parentElement" )
+			});
 			el.prepend(el_mark);
 			if(is_fragment) el_host= el_mark;
 			break;
 		}
 		case tag==="#text":      el= assign.call(this, document.createTextNode(""), attributes); break;
 		case tag==="<>" || !tag: el= assign.call(this, document.createDocumentFragment(), attributes); break;
-		case namespace!=="html": el= assign.call(this, document.createElementNS(namespace, tag), attributes); break;
+		case namespace:          el= assign.call(this, document.createElementNS(namespace, tag), attributes); break;
 		case !el:                el= assign.call(this, document.createElement(tag), attributes);
 	}
+	chainableAppend(el);
 	if(!el_host) el_host= el;
 	modifiers.forEach(c=> c(el_host));
 	if(scoped) scope.pop();
 	scoped= 2;
 	return el;
 }
+/**
+ * @param { { type: "component", name: string, host: "this" | "parentElement" } | { type: "reactive" | "later" } } attrs
+ * @param {boolean} [is_open=false]
+ * */
+createElement.mark= function(attrs, is_open= false){
+	attrs= Object.entries(attrs).map(([ n, v ])=> n+`="${v}"`).join(" ");
+	const end= is_open ? "" : "/";
+	const out= document.createComment(`<dde:mark ${attrs}${end}>`);
+	if(!is_open) out.end= document.createComment("</dde:mark>");
+	return out;
+};
+createElement.later= function(){
+	const el= createElement.mark({ type: "later" });
+	el.append= el.prepend= function(...els){ el.after(...els); return el; };
+	return el;
+};
 export { createElement as el };
 
+//const namespaceHelper= ns=> ns==="svg" ? "http://www.w3.org/2000/svg" : ns;
+export function createElementNS(ns){
+	const _this= this;
+	return function createElementNSCurried(...rest){
+		namespace= ns;
+		const el= createElement.call(_this, ...rest);
+		namespace= undefined;
+		return el;
+	};
+}
+export { createElementNS as elNS };
+
 import { prop_process } from './dom-common.js';
 const { setDeleteAttr }= prop_process;
 const assign_context= new WeakMap();
@@ -161,3 +181,6 @@ function attrArrToStr(attr){ return Array.isArray(attr) ? attr.filter(Boolean).j
 function setRemove(obj, prop, key, val){ return obj[ (isUndef(val) ? "remove" : "set") + prop ](key, attrArrToStr(val)); }
 function setRemoveNS(obj, prop, key, val, ns= null){ return obj[ (isUndef(val) ? "remove" : "set") + prop + "NS" ](ns, key, attrArrToStr(val)); }
 function setDelete(obj, key, val){ Reflect.set(obj, key, val); if(!isUndef(val)) return; return Reflect.deleteProperty(obj, key); }
+
+function append(...els){ this.appendOrig(...els); return this; }
+function chainableAppend(el){ if(el.append===append) return el; el.appendOrig= el.append; el.append= append; return el; }

src/signals-lib.js

@@ -67,7 +67,9 @@ import { scope } from "./dom.js";
 const key_attributes= "__dde_attributes";
 S.attribute= function(name, initial= undefined){
 	const out= S(initial);
+	let host;
 	scope.host(element=> {
+		host= element;
 		if(element instanceof HTMLElement){
 			if(element.hasAttribute(name)) out(element.getAttribute(name));
 		} else {
@@ -83,16 +85,26 @@ S.attribute= function(name, initial= undefined){
 			 * Investigate `__dde_attributes` key of the element.*/
 			const [ name, value ]= detail;
 			const curr= element[key_attributes][name];
-			if(curr) curr(value);
+			if(curr) return curr(value);
 		})(element);
 		on.disconnected(function(){
 			/*! This removes all signals mapped to attributes (`S.attribute`).
 			 * Investigate `__dde_attributes` key of the element.*/
 			S.clear(...Object.values(element[key_attributes]));
+			host= null;
 		})(element);
 		return element;
 	});
-	return out;
+	return new Proxy(out, {
+		apply(target, _, args){
+			if(!args.length) return target();
+			if(!host) return;
+			const value= args[0];
+			if(host instanceof HTMLElement)
+				return host.setAttribute(name, value);
+			return host.setAttributeNS(null, name, value);
+		}
+	});
 };
 S.clear= function(...signals){
 	for(const signal of signals){
@@ -117,9 +129,10 @@ S.clear= function(...signals){
 	}
 };
 const key_reactive= "__dde_reactive";
+import { el } from "./dom.js";
 S.el= function(signal, map){
-	const mark_start= document.createComment(`<dde:mark type="reactive">`);
-	const mark_end= document.createComment("</dde:mark>");
+	const mark_start= el.mark({ type: "reactive" }, false);
+	const mark_end= mark_start.end;
 	const out= document.createDocumentFragment();
 	out.append(mark_start, mark_end);
 	const { current }= scope;