diff --git a/dist/esm-with-signals.d.ts b/dist/esm-with-signals.d.ts
index 672e3fa..0e26b90 100644
--- a/dist/esm-with-signals.d.ts
+++ b/dist/esm-with-signals.d.ts
@@ -1,69 +1,4 @@
-export type Signal<V, A>= (set?: V)=> V & A;
-type Action<V>= (this: { value: V, stopPropagation(): void }, ...a: any[])=> typeof signal._ | void;
-//type SymbolSignal= Symbol;
-type SymbolOnclear= symbol;
-type Actions<V>= Record<string | SymbolOnclear, Action<V>>;
-type OnListenerOptions= Pick<AddEventListenerOptions, "signal"> & { first_time?: boolean };
-interface signal{
-	_: Symbol
-	/**
-	 * Simple example:
-	 * ```js
-	 * const hello= S("Hello Signal");
-	 * ```
-	 * …simple todo signal:
-	 * ```js
-	 * const todos= S([], {
-	 * 	add(v){ this.value.push(S(v)); },
-	 * 	remove(i){ this.value.splice(i, 1); },
-	 * 	[S.symbols.onclear](){ S.clear(...this.value); },
-	 * });
-	 * ```
-	 * …computed signal:
-	 * ```js
-	 * const name= S("Jan");
-	 * const surname= S("Andrle");
-	 * const fullname= S(()=> name()+" "+surname());
-	 * ```
-	 * @param value Initial signal value. Or function computing value from other signals.
-	 * @param actions Use to define actions on the signal. Such as add item to the array.
-	 *		There is also a reserved function `S.symbol.onclear` which is called when the signal is cleared
-	 *		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,
-		...params: A[N] extends (...args: infer P)=> any ? P : never
-	): void;
-	clear(...signals: Signal<any, any>[]): void;
-	on<T>(signal: Signal<T, any>, onchange: (a: T)=> void, options?: OnListenerOptions): void;
-	symbols: {
-		//signal: SymbolSignal;
-		onclear: SymbolOnclear;
-	}
-	/**
-	 * 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): DocumentFragment;
-
-    observedAttributes(custom_element: HTMLElement): Record<string, Signal<any, any>>;
-}
-export const signal: signal;
-export const S: signal;
-declare global {
-	type ddeSignal<T, A= {}>= Signal<T, A>;
-	type ddeAction<V>= Action<V>
-	type ddeActions<V>= Actions<V>
-}
+declare global{ /* ddeSignal */ }
 type CustomElementTagNameMap= { '#text': Text, '#comment': Comment }
 type SupportedElement=
 	  HTMLElementTagNameMap[keyof HTMLElementTagNameMap]
@@ -80,20 +15,20 @@ type AttrsModified= {
 	/**
 	 * Use string like in HTML (internally uses `*.setAttribute("style", *)`), or object representation (like DOM API).
 	 */
-	style: string | Partial<CSSStyleDeclaration> | Signal<string, any> | Partial<{ [K in keyof CSSStyleDeclaration]: Signal<CSSStyleDeclaration[K], any> }>
+	style: string | Partial<CSSStyleDeclaration> | ddeSignal<string> | Partial<{ [K in keyof CSSStyleDeclaration]: ddeSignal<CSSStyleDeclaration[K]> }>
 	/**
 	 * 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.
 	 */
-	classList: Record<string,-1|0|1|boolean|Signal<-1|0|1|boolean, any>>,
+	classList: Record<string,-1|0|1|boolean|ddeSignal<-1|0|1|boolean>>,
 	/**
 	 * By default simiral to `className`, but also supports `string[]`
 	 * */
-	className: string | (string|boolean|undefined|Signal<string|boolean|undefined, any>)[];
+	className: string | (string|boolean|undefined|ddeSignal<string|boolean|undefined>)[];
 	/**
 	 * Sets `aria-*` simiraly to `dataset`
 	 * */
-	ariaset: Record<string,string|Signal<string, any>>,
-} & Record<`=${string}` | `data${PascalCase}` | `aria${PascalCase}`, string|Signal<string, any>> & Record<`.${string}`, any>
+	ariaset: Record<string,string|ddeSignal<string>>,
+} & Record<`=${string}` | `data${PascalCase}` | `aria${PascalCase}`, string|ddeSignal<string>> & Record<`.${string}`, any>
 type _fromElsInterfaces<EL extends SupportedElement>= Omit<EL, keyof AttrsModified>;
 /**
  * Just element attributtes
@@ -103,15 +38,15 @@ type _fromElsInterfaces<EL extends SupportedElement>= Omit<EL, keyof AttrsModifi
  * There is added support for `data[A-Z].*`/`aria[A-Z].*` to be converted to the kebab-case alternatives.
  * @private
  */
-type ElementAttributes<T extends SupportedElement>= Partial<_fromElsInterfaces<T> & { [K in keyof _fromElsInterfaces<T>]: Signal<_fromElsInterfaces<T>[K], any> } & AttrsModified> & Record<string, any>;
+type ElementAttributes<T extends SupportedElement>= Partial<{ [K in keyof _fromElsInterfaces<T>]: _fromElsInterfaces<T>[K] | ddeSignal<_fromElsInterfaces<T>[K]> } & AttrsModified> & Record<string, any>;
 export function classListDeclarative<El extends SupportedElement>(element: El, classList: AttrsModified["classList"]): El
 export function assign<El extends SupportedElement>(element: El, ...attrs_array: ElementAttributes<El>[]): El
 export function assignAttribute<El extends SupportedElement, ATT extends keyof ElementAttributes<El>>(element: El, attr: ATT, value: ElementAttributes<El>[ATT]): ElementAttributes<El>[ATT]
 
 type ExtendedHTMLElementTagNameMap= HTMLElementTagNameMap & CustomElementTagNameMap;
-type textContent= string | ( (set?: string)=> string ); // TODO: for some reason `Signal<string, any>` leads to `attrs?: any`
+type textContent= string | ddeSignal<string>;
 export function el<
-	TAG extends keyof ExtendedHTMLElementTagNameMap & string,
+	TAG extends keyof ExtendedHTMLElementTagNameMap,
 	EL extends (TAG extends keyof ExtendedHTMLElementTagNameMap ? ExtendedHTMLElementTagNameMap[TAG] : HTMLElement)
 >(
 	tag_name: TAG,
@@ -121,6 +56,11 @@ export function el<
 export function el(
 	tag_name?: "<>",
 ): ddeDocumentFragment
+export function el(
+	tag_name: string,
+	attrs?: ElementAttributes<HTMLElement>,
+	...addons: ddeElementAddon<HTMLElement>[]
+): ddeHTMLElement
 
 export function el<
 	C extends (attr: ddeComponentAttributes)=> SupportedElement | ddeDocumentFragment
@@ -148,7 +88,7 @@ export function elNS(
 	EL extends ( TAG extends keyof MathMLElementTagNameMap ? MathMLElementTagNameMap[TAG] : MathMLElement ),
 >(
 	tag_name: TAG,
-	attrs?: string | textContent | Partial<{ [key in keyof EL]: EL[key] | Signal<EL[key], any> | string | number | boolean }>,
+	attrs?: string | textContent | Partial<{ [key in keyof EL]: EL[key] | ddeSignal<EL[key]> | string | number | boolean }>,
 	...addons: ddeElementAddon<EL>[]
 )=> ddeMathMLElement
 export function elNS(
@@ -189,7 +129,7 @@ interface On{
 		EE extends ddeElementAddon<SupportedElement>,
 		El extends ( EE extends ddeElementAddon<infer El> ? El : never )
 		>(
-			listener: (this: El, event: CustomEvent<void>) => any,
+			listener: (this: El, event: CustomEvent<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 */
@@ -224,7 +164,7 @@ export const scope: {
 	 * It can be also used to register Addon(s) (functions to be called when component is initized)
 	 * — `scope.host(on.connected(console.log))`.
 	 * */
-	host: (...addons: ddeElementAddon<any>[])=> HTMLElement,
+	host: (...addons: ddeElementAddon<SupportedElement>[])=> HTMLElement,
 	
 	state: Scope[],
 	/** Adds new child scope. All attributes are inherited by default. */
@@ -237,15 +177,15 @@ export const scope: {
 
 export function customElementRender<
 	EL extends HTMLElement,
-	P extends any = Record<string, any>
+	P extends any = Record<string, string | ddeSignal<string>>
 >(
 	custom_element: EL,
 	target: ShadowRoot | EL,
-	render: (props: P)=> SupportedElement,
-	props?: P | ((...args: any[])=> P)
+	render: (props: P)=> SupportedElement | DocumentFragment,
+	props?: P | ((el: EL)=> P)
 ): EL
-export function customElementWithDDE<EL extends HTMLElement>(custom_element: EL): EL
-export function lifecyclesToEvents<EL extends HTMLElement>(custom_element: EL): EL
+export function customElementWithDDE<EL extends (new ()=> HTMLElement)>(custom_element: EL): EL
+export function lifecyclesToEvents<EL extends (new ()=> HTMLElement)>(custom_element: EL): EL
 export function observedAttributes(custom_element: HTMLElement): Record<string, string>
 
 /* TypeScript MEH */
@@ -525,4 +465,70 @@ interface ddeSVGTextPathElement extends SVGTextPathElement{ append: ddeAppend<dd
 interface ddeSVGTitleElement extends SVGTitleElement{ append: ddeAppend<ddeSVGTitleElement>; }
 interface ddeSVGTSpanElement extends SVGTSpanElement{ append: ddeAppend<ddeSVGTSpanElement>; }
 interface ddeSVGUseElement extends SVGUseElement{ append: ddeAppend<ddeSVGUseElement>; }
-interface ddeSVGViewElement extends SVGViewElement{ append: ddeAppend<ddeSVGViewElement>; }
\ No newline at end of file
+interface ddeSVGViewElement extends SVGViewElement{ append: ddeAppend<ddeSVGViewElement>; }
+export type Signal<V, A>= (set?: V)=> V & A;
+type Action<V>= (this: { value: V, stopPropagation(): void }, ...a: any[])=> typeof signal._ | void;
+//type SymbolSignal= Symbol;
+type SymbolOnclear= symbol;
+type Actions<V>= Record<string | SymbolOnclear, Action<V>>;
+type OnListenerOptions= Pick<AddEventListenerOptions, "signal"> & { first_time?: boolean };
+interface signal{
+	_: Symbol
+	/**
+	 * Computations signal. This creates a signal which is computed from other signals.
+	 * */
+	<V extends ()=> any>(computation: V): Signal<ReturnType<V>, {}>
+	/**
+	 * Simple example:
+	 * ```js
+	 * const hello= S("Hello Signal");
+	 * ```
+	 * …simple todo signal:
+	 * ```js
+	 * const todos= S([], {
+	 * 	add(v){ this.value.push(S(v)); },
+	 * 	remove(i){ this.value.splice(i, 1); },
+	 * 	[S.symbols.onclear](){ S.clear(...this.value); },
+	 * });
+	 * ```
+	 * …computed signal:
+	 * ```js
+	 * const name= S("Jan");
+	 * const surname= S("Andrle");
+	 * const fullname= S(()=> name()+" "+surname());
+	 * ```
+	 * @param value Initial signal value. Or function computing value from other signals.
+	 * @param actions Use to define actions on the signal. Such as add item to the array.
+	 *		There is also a reserved function `S.symbol.onclear` which is called when the signal is cleared
+	 *		by `S.clear`.
+	 * */
+	<V, A extends Actions<V>>(value: V, actions?: A): Signal<V, A>;
+	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,
+		...params: A[N] extends (...args: infer P)=> any ? P : never
+	): void;
+	clear(...signals: Signal<any, any>[]): void;
+	on<T>(signal: Signal<T, any>, onchange: (a: T)=> void, options?: OnListenerOptions): void;
+	symbols: {
+		//signal: SymbolSignal;
+		onclear: SymbolOnclear;
+	}
+	/**
+	 * 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): DocumentFragment;
+
+    observedAttributes(custom_element: HTMLElement): Record<string, Signal<string, {}>>;
+}
+export const signal: signal;
+export const S: signal;
+declare global {
+	type ddeSignal<T, A= {}>= Signal<T, A>;
+	type ddeAction<V>= Action<V>
+	type ddeActions<V>= Actions<V>
+}
\ No newline at end of file
diff --git a/dist/esm.d.ts b/dist/esm.d.ts
index 672e3fa..3cc6e74 100644
--- a/dist/esm.d.ts
+++ b/dist/esm.d.ts
@@ -1,69 +1,4 @@
-export type Signal<V, A>= (set?: V)=> V & A;
-type Action<V>= (this: { value: V, stopPropagation(): void }, ...a: any[])=> typeof signal._ | void;
-//type SymbolSignal= Symbol;
-type SymbolOnclear= symbol;
-type Actions<V>= Record<string | SymbolOnclear, Action<V>>;
-type OnListenerOptions= Pick<AddEventListenerOptions, "signal"> & { first_time?: boolean };
-interface signal{
-	_: Symbol
-	/**
-	 * Simple example:
-	 * ```js
-	 * const hello= S("Hello Signal");
-	 * ```
-	 * …simple todo signal:
-	 * ```js
-	 * const todos= S([], {
-	 * 	add(v){ this.value.push(S(v)); },
-	 * 	remove(i){ this.value.splice(i, 1); },
-	 * 	[S.symbols.onclear](){ S.clear(...this.value); },
-	 * });
-	 * ```
-	 * …computed signal:
-	 * ```js
-	 * const name= S("Jan");
-	 * const surname= S("Andrle");
-	 * const fullname= S(()=> name()+" "+surname());
-	 * ```
-	 * @param value Initial signal value. Or function computing value from other signals.
-	 * @param actions Use to define actions on the signal. Such as add item to the array.
-	 *		There is also a reserved function `S.symbol.onclear` which is called when the signal is cleared
-	 *		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,
-		...params: A[N] extends (...args: infer P)=> any ? P : never
-	): void;
-	clear(...signals: Signal<any, any>[]): void;
-	on<T>(signal: Signal<T, any>, onchange: (a: T)=> void, options?: OnListenerOptions): void;
-	symbols: {
-		//signal: SymbolSignal;
-		onclear: SymbolOnclear;
-	}
-	/**
-	 * 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): DocumentFragment;
-
-    observedAttributes(custom_element: HTMLElement): Record<string, Signal<any, any>>;
-}
-export const signal: signal;
-export const S: signal;
-declare global {
-	type ddeSignal<T, A= {}>= Signal<T, A>;
-	type ddeAction<V>= Action<V>
-	type ddeActions<V>= Actions<V>
-}
+declare global{ /* ddeSignal */ }
 type CustomElementTagNameMap= { '#text': Text, '#comment': Comment }
 type SupportedElement=
 	  HTMLElementTagNameMap[keyof HTMLElementTagNameMap]
@@ -80,20 +15,20 @@ type AttrsModified= {
 	/**
 	 * Use string like in HTML (internally uses `*.setAttribute("style", *)`), or object representation (like DOM API).
 	 */
-	style: string | Partial<CSSStyleDeclaration> | Signal<string, any> | Partial<{ [K in keyof CSSStyleDeclaration]: Signal<CSSStyleDeclaration[K], any> }>
+	style: string | Partial<CSSStyleDeclaration> | ddeSignal<string> | Partial<{ [K in keyof CSSStyleDeclaration]: ddeSignal<CSSStyleDeclaration[K]> }>
 	/**
 	 * 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.
 	 */
-	classList: Record<string,-1|0|1|boolean|Signal<-1|0|1|boolean, any>>,
+	classList: Record<string,-1|0|1|boolean|ddeSignal<-1|0|1|boolean>>,
 	/**
 	 * By default simiral to `className`, but also supports `string[]`
 	 * */
-	className: string | (string|boolean|undefined|Signal<string|boolean|undefined, any>)[];
+	className: string | (string|boolean|undefined|ddeSignal<string|boolean|undefined>)[];
 	/**
 	 * Sets `aria-*` simiraly to `dataset`
 	 * */
-	ariaset: Record<string,string|Signal<string, any>>,
-} & Record<`=${string}` | `data${PascalCase}` | `aria${PascalCase}`, string|Signal<string, any>> & Record<`.${string}`, any>
+	ariaset: Record<string,string|ddeSignal<string>>,
+} & Record<`=${string}` | `data${PascalCase}` | `aria${PascalCase}`, string|ddeSignal<string>> & Record<`.${string}`, any>
 type _fromElsInterfaces<EL extends SupportedElement>= Omit<EL, keyof AttrsModified>;
 /**
  * Just element attributtes
@@ -103,15 +38,15 @@ type _fromElsInterfaces<EL extends SupportedElement>= Omit<EL, keyof AttrsModifi
  * There is added support for `data[A-Z].*`/`aria[A-Z].*` to be converted to the kebab-case alternatives.
  * @private
  */
-type ElementAttributes<T extends SupportedElement>= Partial<_fromElsInterfaces<T> & { [K in keyof _fromElsInterfaces<T>]: Signal<_fromElsInterfaces<T>[K], any> } & AttrsModified> & Record<string, any>;
+type ElementAttributes<T extends SupportedElement>= Partial<{ [K in keyof _fromElsInterfaces<T>]: _fromElsInterfaces<T>[K] | ddeSignal<_fromElsInterfaces<T>[K]> } & AttrsModified> & Record<string, any>;
 export function classListDeclarative<El extends SupportedElement>(element: El, classList: AttrsModified["classList"]): El
 export function assign<El extends SupportedElement>(element: El, ...attrs_array: ElementAttributes<El>[]): El
 export function assignAttribute<El extends SupportedElement, ATT extends keyof ElementAttributes<El>>(element: El, attr: ATT, value: ElementAttributes<El>[ATT]): ElementAttributes<El>[ATT]
 
 type ExtendedHTMLElementTagNameMap= HTMLElementTagNameMap & CustomElementTagNameMap;
-type textContent= string | ( (set?: string)=> string ); // TODO: for some reason `Signal<string, any>` leads to `attrs?: any`
+type textContent= string | ddeSignal<string>;
 export function el<
-	TAG extends keyof ExtendedHTMLElementTagNameMap & string,
+	TAG extends keyof ExtendedHTMLElementTagNameMap,
 	EL extends (TAG extends keyof ExtendedHTMLElementTagNameMap ? ExtendedHTMLElementTagNameMap[TAG] : HTMLElement)
 >(
 	tag_name: TAG,
@@ -121,6 +56,11 @@ export function el<
 export function el(
 	tag_name?: "<>",
 ): ddeDocumentFragment
+export function el(
+	tag_name: string,
+	attrs?: ElementAttributes<HTMLElement>,
+	...addons: ddeElementAddon<HTMLElement>[]
+): ddeHTMLElement
 
 export function el<
 	C extends (attr: ddeComponentAttributes)=> SupportedElement | ddeDocumentFragment
@@ -148,7 +88,7 @@ export function elNS(
 	EL extends ( TAG extends keyof MathMLElementTagNameMap ? MathMLElementTagNameMap[TAG] : MathMLElement ),
 >(
 	tag_name: TAG,
-	attrs?: string | textContent | Partial<{ [key in keyof EL]: EL[key] | Signal<EL[key], any> | string | number | boolean }>,
+	attrs?: string | textContent | Partial<{ [key in keyof EL]: EL[key] | ddeSignal<EL[key]> | string | number | boolean }>,
 	...addons: ddeElementAddon<EL>[]
 )=> ddeMathMLElement
 export function elNS(
@@ -189,7 +129,7 @@ interface On{
 		EE extends ddeElementAddon<SupportedElement>,
 		El extends ( EE extends ddeElementAddon<infer El> ? El : never )
 		>(
-			listener: (this: El, event: CustomEvent<void>) => any,
+			listener: (this: El, event: CustomEvent<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 */
@@ -224,7 +164,7 @@ export const scope: {
 	 * It can be also used to register Addon(s) (functions to be called when component is initized)
 	 * — `scope.host(on.connected(console.log))`.
 	 * */
-	host: (...addons: ddeElementAddon<any>[])=> HTMLElement,
+	host: (...addons: ddeElementAddon<SupportedElement>[])=> HTMLElement,
 	
 	state: Scope[],
 	/** Adds new child scope. All attributes are inherited by default. */
@@ -237,15 +177,15 @@ export const scope: {
 
 export function customElementRender<
 	EL extends HTMLElement,
-	P extends any = Record<string, any>
+	P extends any = Record<string, string | ddeSignal<string>>
 >(
 	custom_element: EL,
 	target: ShadowRoot | EL,
-	render: (props: P)=> SupportedElement,
-	props?: P | ((...args: any[])=> P)
+	render: (props: P)=> SupportedElement | DocumentFragment,
+	props?: P | ((el: EL)=> P)
 ): EL
-export function customElementWithDDE<EL extends HTMLElement>(custom_element: EL): EL
-export function lifecyclesToEvents<EL extends HTMLElement>(custom_element: EL): EL
+export function customElementWithDDE<EL extends (new ()=> HTMLElement)>(custom_element: EL): EL
+export function lifecyclesToEvents<EL extends (new ()=> HTMLElement)>(custom_element: EL): EL
 export function observedAttributes(custom_element: HTMLElement): Record<string, string>
 
 /* TypeScript MEH */
diff --git a/docs/p06-customElement.html b/docs/p06-customElement.html
index 9b15916..7235e83 100644
--- a/docs/p06-customElement.html
+++ b/docs/p06-customElement.html
@@ -87,4 +87,46 @@ customElements.define(HTMLCustomElement.tagName, HTMLCustomElement);
 document.body.append(
 	el(HTMLCustomElement.tagName, { attr: "Attribute" })
 );
-</code></div><script>Flems(document.getElementById("code-example-1-vivfgyxx9kw"), JSON.parse("{\"files\":[{\"name\":\".js\",\"content\":\"import {\\n\\tcustomElementRender,\\n\\tcustomElementWithDDE,\\n} from \\\"./esm-with-signals.js\\\";\\nexport class HTMLCustomElement extends HTMLElement{\\n\\tstatic tagName= \\\"custom-element\\\";\\n\\tstatic observedAttributes= [ \\\"attr\\\" ];\\n\\tconnectedCallback(){\\n\\t\\tcustomElementRender(\\n\\t\\t\\tthis,\\n\\t\\t\\tthis.attachShadow({ mode: \\\"open\\\" }),\\n\\t\\t\\tddeComponent\\n\\t\\t);\\n\\t}\\n\\tset attr(value){ this.setAttribute(\\\"attr\\\", value); }\\n\\tget attr(){ return this.getAttribute(\\\"attr\\\"); }\\n}\\n\\nimport { el, on, scope } from \\\"./esm-with-signals.js\\\";\\nfunction ddeComponent({ attr }){\\n\\tscope.host(\\n\\t\\ton.connected(e=> console.log(e.target.outerHTML)),\\n\\t);\\n\\treturn el().append(\\n\\t\\tel(\\\"p\\\", `Hello from Custom Element with attribute '${attr}'`)\\n\\t);\\n}\\ncustomElementWithDDE(HTMLCustomElement);\\ncustomElements.define(HTMLCustomElement.tagName, HTMLCustomElement);\\n\\ndocument.body.append(\\n\\tel(HTMLCustomElement.tagName, { attr: \\\"Attribute\\\" })\\n);\\n\"},{\"name\":\"esm-with-signals.js\",\"content\":\"// src/signals-common.js\\nvar k = {\\n\\tisSignal(t) {\\n\\t\\treturn !1;\\n\\t},\\n\\tprocessReactiveAttribute(t, e, n, r) {\\n\\t\\treturn n;\\n\\t}\\n};\\nfunction B(t, e = !0) {\\n\\treturn e ? Object.assign(k, t) : (Object.setPrototypeOf(t, k), t);\\n}\\nfunction W(t) {\\n\\treturn k.isPrototypeOf(t) && t !== k ? t : k;\\n}\\n\\n// src/helpers.js\\nvar T = (...t) => Object.prototype.hasOwnProperty.call(...t);\\nfunction S(t) {\\n\\treturn typeof t > \\\"u\\\";\\n}\\nfunction X(t) {\\n\\tlet e = typeof t;\\n\\treturn e !== \\\"object\\\" ? e : t === null ? \\\"null\\\" : Object.prototype.toString.call(t);\\n}\\nfunction q(t, e) {\\n\\tif (!t || !(t instanceof AbortSignal))\\n\\t\\treturn !0;\\n\\tif (!t.aborted)\\n\\t\\treturn t.addEventListener(\\\"abort\\\", e), function() {\\n\\t\\t\\tt.removeEventListener(\\\"abort\\\", e);\\n\\t\\t};\\n}\\nfunction F(t, e) {\\n\\tlet { observedAttributes: n = [] } = t.constructor;\\n\\treturn n.reduce(function(r, o) {\\n\\t\\treturn r[pt(o)] = e(t, o), r;\\n\\t}, {});\\n}\\nfunction pt(t) {\\n\\treturn t.replace(/-./g, (e) => e[1].toUpperCase());\\n}\\n\\n// src/dom-common.js\\nvar d = {\\n\\tsetDeleteAttr: lt,\\n\\tssr: \\\"\\\",\\n\\tD: globalThis.document,\\n\\tF: globalThis.DocumentFragment,\\n\\tH: globalThis.HTMLElement,\\n\\tS: globalThis.SVGElement,\\n\\tM: globalThis.MutationObserver\\n};\\nfunction lt(t, e, n) {\\n\\tif (Reflect.set(t, e, n), !!S(n)) {\\n\\t\\tif (Reflect.deleteProperty(t, e), t instanceof d.H && t.getAttribute(e) === \\\"undefined\\\")\\n\\t\\t\\treturn t.removeAttribute(e);\\n\\t\\tif (Reflect.get(t, e) === \\\"undefined\\\")\\n\\t\\t\\treturn Reflect.set(t, e, \\\"\\\");\\n\\t}\\n}\\nvar C = \\\"__dde_lifecyclesToEvents\\\", _ = \\\"dde:connected\\\", O = \\\"dde:disconnected\\\", M = \\\"dde:attributeChanged\\\";\\n\\n// src/dom.js\\nvar A = [{\\n\\tget scope() {\\n\\t\\treturn d.D.body;\\n\\t},\\n\\thost: (t) => t ? t(d.D.body) : d.D.body,\\n\\tprevent: !0\\n}], m = {\\n\\tget current() {\\n\\t\\treturn A[A.length - 1];\\n\\t},\\n\\tget host() {\\n\\t\\treturn this.current.host;\\n\\t},\\n\\tpreventDefault() {\\n\\t\\tlet { current: t } = this;\\n\\t\\treturn t.prevent = !0, t;\\n\\t},\\n\\tget state() {\\n\\t\\treturn [...A];\\n\\t},\\n\\tpush(t = {}) {\\n\\t\\treturn A.push(Object.assign({}, this.current, { prevent: !1 }, t));\\n\\t},\\n\\tpushRoot() {\\n\\t\\treturn A.push(A[0]);\\n\\t},\\n\\tpop() {\\n\\t\\tif (A.length !== 1)\\n\\t\\t\\treturn A.pop();\\n\\t}\\n};\\nfunction Y(...t) {\\n\\treturn this.appendOriginal(...t), this;\\n}\\nfunction ht(t) {\\n\\treturn t.append === Y || (t.appendOriginal = t.append, t.append = Y), t;\\n}\\nvar $;\\nfunction j(t, e, ...n) {\\n\\tlet r = W(this), o = 0, c, i;\\n\\tswitch ((Object(e) !== e || r.isSignal(e)) && (e = { textContent: e }), !0) {\\n\\t\\tcase typeof t == \\\"function\\\": {\\n\\t\\t\\to = 1, m.push({ scope: t, host: (...v) => v.length ? (o === 1 ? n.unshift(...v) : v.forEach((l) => l(i)), void 0) : i }), c = t(e || void 0);\\n\\t\\t\\tlet a = c instanceof d.F;\\n\\t\\t\\tif (c.nodeName === \\\"#comment\\\")\\n\\t\\t\\t\\tbreak;\\n\\t\\t\\tlet h = j.mark({\\n\\t\\t\\t\\ttype: \\\"component\\\",\\n\\t\\t\\t\\tname: t.name,\\n\\t\\t\\t\\thost: a ? \\\"this\\\" : \\\"parentElement\\\"\\n\\t\\t\\t});\\n\\t\\t\\tc.prepend(h), a && (i = h);\\n\\t\\t\\tbreak;\\n\\t\\t}\\n\\t\\tcase t === \\\"#text\\\":\\n\\t\\t\\tc = P.call(this, d.D.createTextNode(\\\"\\\"), e);\\n\\t\\t\\tbreak;\\n\\t\\tcase (t === \\\"<>\\\" || !t):\\n\\t\\t\\tc = P.call(this, d.D.createDocumentFragment(), e);\\n\\t\\t\\tbreak;\\n\\t\\tcase !!$:\\n\\t\\t\\tc = P.call(this, d.D.createElementNS($, t), e);\\n\\t\\t\\tbreak;\\n\\t\\tcase !c:\\n\\t\\t\\tc = P.call(this, d.D.createElement(t), e);\\n\\t}\\n\\treturn ht(c), i || (i = c), n.forEach((a) => a(i)), o && m.pop(), o = 2, c;\\n}\\nfunction Wt(t, e = t, n = void 0) {\\n\\tlet r = Symbol.for(\\\"default\\\"), o = Array.from(e.querySelectorAll(\\\"slot\\\")).reduce((i, a) => Reflect.set(i, a.name || r, a) && i, {}), c = T(o, r);\\n\\tif (t.append = new Proxy(t.append, {\\n\\t\\tapply(i, a, h) {\\n\\t\\t\\tif (!h.length)\\n\\t\\t\\t\\treturn t;\\n\\t\\t\\tlet v = d.D.createDocumentFragment();\\n\\t\\t\\tfor (let l of h) {\\n\\t\\t\\t\\tif (!l || !l.slot) {\\n\\t\\t\\t\\t\\tc && v.appendChild(l);\\n\\t\\t\\t\\t\\tcontinue;\\n\\t\\t\\t\\t}\\n\\t\\t\\t\\tlet x = l.slot, y = o[x];\\n\\t\\t\\t\\tvt(l, \\\"remove\\\", \\\"slot\\\"), y && (bt(y, l, n), Reflect.deleteProperty(o, x));\\n\\t\\t\\t}\\n\\t\\t\\treturn c && (o[r].replaceWith(v), Reflect.deleteProperty(o, r)), t.append = i, t;\\n\\t\\t}\\n\\t}), t !== e) {\\n\\t\\tlet i = Array.from(t.childNodes);\\n\\t\\ti.forEach((a) => a.remove()), t.append(...i);\\n\\t}\\n\\treturn e;\\n}\\nfunction bt(t, e, n) {\\n\\tn && n(t, e);\\n\\ttry {\\n\\t\\tt.replaceWith(P(e, { className: [e.className, t.className], dataset: { ...t.dataset } }));\\n\\t} catch {\\n\\t\\tt.replaceWith(e);\\n\\t}\\n}\\nj.mark = function(t, e = !1) {\\n\\tt = Object.entries(t).map(([o, c]) => o + `=\\\"${c}\\\"`).join(\\\" \\\");\\n\\tlet n = e ? \\\"\\\" : \\\"/\\\", r = d.D.createComment(`<dde:mark ${t}${d.ssr}${n}>`);\\n\\treturn e && (r.end = d.D.createComment(\\\"</dde:mark>\\\")), r;\\n};\\nfunction qt(t) {\\n\\tlet e = this;\\n\\treturn function(...r) {\\n\\t\\t$ = t;\\n\\t\\tlet o = j.call(e, ...r);\\n\\t\\treturn $ = void 0, o;\\n\\t};\\n}\\nvar U = /* @__PURE__ */ new WeakMap(), { setDeleteAttr: tt } = d;\\nfunction P(t, ...e) {\\n\\tif (!e.length)\\n\\t\\treturn t;\\n\\tU.set(t, rt(t, this));\\n\\tfor (let [n, r] of Object.entries(Object.assign({}, ...e)))\\n\\t\\tnt.call(this, t, n, r);\\n\\treturn U.delete(t), t;\\n}\\nfunction nt(t, e, n) {\\n\\tlet { setRemoveAttr: r, s: o } = rt(t, this), c = this;\\n\\tn = o.processReactiveAttribute(\\n\\t\\tt,\\n\\t\\te,\\n\\t\\tn,\\n\\t\\t(a, h) => nt.call(c, t, a, h)\\n\\t);\\n\\tlet [i] = e;\\n\\tif (i === \\\"=\\\")\\n\\t\\treturn r(e.slice(1), n);\\n\\tif (i === \\\".\\\")\\n\\t\\treturn et(t, e.slice(1), n);\\n\\tif (/(aria|data)([A-Z])/.test(e))\\n\\t\\treturn e = e.replace(/([a-z])([A-Z])/g, \\\"$1-$2\\\").toLowerCase(), r(e, n);\\n\\tswitch (e === \\\"className\\\" && (e = \\\"class\\\"), e) {\\n\\t\\tcase \\\"xlink:href\\\":\\n\\t\\t\\treturn r(e, n, \\\"http://www.w3.org/1999/xlink\\\");\\n\\t\\tcase \\\"textContent\\\":\\n\\t\\t\\treturn tt(t, e, n);\\n\\t\\tcase \\\"style\\\":\\n\\t\\t\\tif (typeof n != \\\"object\\\")\\n\\t\\t\\t\\tbreak;\\n\\t\\tcase \\\"dataset\\\":\\n\\t\\t\\treturn I(o, n, et.bind(null, t[e]));\\n\\t\\tcase \\\"ariaset\\\":\\n\\t\\t\\treturn I(o, n, (a, h) => r(\\\"aria-\\\" + a, h));\\n\\t\\tcase \\\"classList\\\":\\n\\t\\t\\treturn gt.call(c, t, n);\\n\\t}\\n\\treturn Et(t, e) ? tt(t, e, n) : r(e, n);\\n}\\nfunction rt(t, e) {\\n\\tif (U.has(t))\\n\\t\\treturn U.get(t);\\n\\tlet r = (t instanceof d.S ? xt : mt).bind(null, t, \\\"Attribute\\\"), o = W(e);\\n\\treturn { setRemoveAttr: r, s: o };\\n}\\nfunction gt(t, e) {\\n\\tlet n = W(this);\\n\\treturn I(\\n\\t\\tn,\\n\\t\\te,\\n\\t\\t(r, o) => t.classList.toggle(r, o === -1 ? void 0 : !!o)\\n\\t), t;\\n}\\nfunction Ft(t) {\\n\\treturn Array.from(t.children).forEach((e) => e.remove()), t;\\n}\\nfunction vt(t, e, n, r) {\\n\\treturn t instanceof d.H ? t[e + \\\"Attribute\\\"](n, r) : t[e + \\\"AttributeNS\\\"](null, n, r);\\n}\\nfunction Et(t, e) {\\n\\tif (!(e in t))\\n\\t\\treturn !1;\\n\\tlet n = ot(t, e);\\n\\treturn !S(n.set);\\n}\\nfunction ot(t, e) {\\n\\tif (t = Object.getPrototypeOf(t), !t)\\n\\t\\treturn {};\\n\\tlet n = Object.getOwnPropertyDescriptor(t, e);\\n\\treturn n || ot(t, e);\\n}\\nfunction I(t, e, n) {\\n\\tif (!(typeof e != \\\"object\\\" || e === null))\\n\\t\\treturn Object.entries(e).forEach(function([o, c]) {\\n\\t\\t\\to && (c = t.processReactiveAttribute(e, o, c, n), n(o, c));\\n\\t\\t});\\n}\\nfunction ct(t) {\\n\\treturn Array.isArray(t) ? t.filter(Boolean).join(\\\" \\\") : t;\\n}\\nfunction mt(t, e, n, r) {\\n\\treturn t[(S(r) ? \\\"remove\\\" : \\\"set\\\") + e](n, ct(r));\\n}\\nfunction xt(t, e, n, r, o = null) {\\n\\treturn t[(S(r) ? \\\"remove\\\" : \\\"set\\\") + e + \\\"NS\\\"](o, n, ct(r));\\n}\\nfunction et(t, e, n) {\\n\\tif (Reflect.set(t, e, n), !!S(n))\\n\\t\\treturn Reflect.deleteProperty(t, e);\\n}\\n\\n// src/events-observer.js\\nvar D = d.M ? wt() : new Proxy({}, {\\n\\tget() {\\n\\t\\treturn () => {\\n\\t\\t};\\n\\t}\\n});\\nfunction wt() {\\n\\tlet t = /* @__PURE__ */ new Map(), e = !1, n = (s) => function(u) {\\n\\t\\tfor (let f of u)\\n\\t\\t\\tif (f.type === \\\"childList\\\") {\\n\\t\\t\\t\\tif (l(f.addedNodes, !0)) {\\n\\t\\t\\t\\t\\ts();\\n\\t\\t\\t\\t\\tcontinue;\\n\\t\\t\\t\\t}\\n\\t\\t\\t\\tx(f.removedNodes, !0) && s();\\n\\t\\t\\t}\\n\\t}, r = new d.M(n(a));\\n\\treturn {\\n\\t\\tobserve(s) {\\n\\t\\t\\tlet u = new d.M(n(() => {\\n\\t\\t\\t}));\\n\\t\\t\\treturn u.observe(s, { childList: !0, subtree: !0 }), () => u.disconnect();\\n\\t\\t},\\n\\t\\tonConnected(s, u) {\\n\\t\\t\\ti();\\n\\t\\t\\tlet f = c(s);\\n\\t\\t\\tf.connected.has(u) || (f.connected.add(u), f.length_c += 1);\\n\\t\\t},\\n\\t\\toffConnected(s, u) {\\n\\t\\t\\tif (!t.has(s))\\n\\t\\t\\t\\treturn;\\n\\t\\t\\tlet f = t.get(s);\\n\\t\\t\\tf.connected.has(u) && (f.connected.delete(u), f.length_c -= 1, o(s, f));\\n\\t\\t},\\n\\t\\tonDisconnected(s, u) {\\n\\t\\t\\ti();\\n\\t\\t\\tlet f = c(s);\\n\\t\\t\\tf.disconnected.has(u) || (f.disconnected.add(u), f.length_d += 1);\\n\\t\\t},\\n\\t\\toffDisconnected(s, u) {\\n\\t\\t\\tif (!t.has(s))\\n\\t\\t\\t\\treturn;\\n\\t\\t\\tlet f = t.get(s);\\n\\t\\t\\tf.disconnected.has(u) && (f.disconnected.delete(u), f.length_d -= 1, o(s, f));\\n\\t\\t}\\n\\t};\\n\\tfunction o(s, u) {\\n\\t\\tu.length_c || u.length_d || (t.delete(s), a());\\n\\t}\\n\\tfunction c(s) {\\n\\t\\tif (t.has(s))\\n\\t\\t\\treturn t.get(s);\\n\\t\\tlet u = {\\n\\t\\t\\tconnected: /* @__PURE__ */ new WeakSet(),\\n\\t\\t\\tlength_c: 0,\\n\\t\\t\\tdisconnected: /* @__PURE__ */ new WeakSet(),\\n\\t\\t\\tlength_d: 0\\n\\t\\t};\\n\\t\\treturn t.set(s, u), u;\\n\\t}\\n\\tfunction i() {\\n\\t\\te || (e = !0, r.observe(d.D.body, { childList: !0, subtree: !0 }));\\n\\t}\\n\\tfunction a() {\\n\\t\\t!e || t.size || (e = !1, r.disconnect());\\n\\t}\\n\\tfunction h() {\\n\\t\\treturn new Promise(function(s) {\\n\\t\\t\\t(requestIdleCallback || requestAnimationFrame)(s);\\n\\t\\t});\\n\\t}\\n\\tasync function v(s) {\\n\\t\\tt.size > 30 && await h();\\n\\t\\tlet u = [];\\n\\t\\tif (!(s instanceof Node))\\n\\t\\t\\treturn u;\\n\\t\\tfor (let f of t.keys())\\n\\t\\t\\tf === s || !(f instanceof Node) || s.contains(f) && u.push(f);\\n\\t\\treturn u;\\n\\t}\\n\\tfunction l(s, u) {\\n\\t\\tlet f = !1;\\n\\t\\tfor (let b of s) {\\n\\t\\t\\tif (u && v(b).then(l), !t.has(b))\\n\\t\\t\\t\\tcontinue;\\n\\t\\t\\tlet N = t.get(b);\\n\\t\\t\\tN.length_c && (b.dispatchEvent(new Event(_)), N.connected = /* @__PURE__ */ new WeakSet(), N.length_c = 0, N.length_d || t.delete(b), f = !0);\\n\\t\\t}\\n\\t\\treturn f;\\n\\t}\\n\\tfunction x(s, u) {\\n\\t\\tlet f = !1;\\n\\t\\tfor (let b of s)\\n\\t\\t\\tu && v(b).then(x), !(!t.has(b) || !t.get(b).length_d) && ((globalThis.queueMicrotask || setTimeout)(y(b)), f = !0);\\n\\t\\treturn f;\\n\\t}\\n\\tfunction y(s) {\\n\\t\\treturn () => {\\n\\t\\t\\ts.isConnected || (s.dispatchEvent(new Event(O)), t.delete(s));\\n\\t\\t};\\n\\t}\\n}\\n\\n// src/customElement.js\\nfunction Zt(t, e, n, r = _t) {\\n\\tm.push({\\n\\t\\tscope: t,\\n\\t\\thost: (...i) => i.length ? i.forEach((a) => a(t)) : t\\n\\t}), typeof r == \\\"function\\\" && (r = r.call(t, t));\\n\\tlet o = t[C];\\n\\to || yt(t);\\n\\tlet c = n.call(t, r);\\n\\treturn o || t.dispatchEvent(new Event(_)), e.nodeType === 11 && typeof e.mode == \\\"string\\\" && t.addEventListener(O, D.observe(e), { once: !0 }), m.pop(), e.append(c);\\n}\\nfunction yt(t) {\\n\\treturn J(t.prototype, \\\"connectedCallback\\\", function(e, n, r) {\\n\\t\\te.apply(n, r), n.dispatchEvent(new Event(_));\\n\\t}), J(t.prototype, \\\"disconnectedCallback\\\", function(e, n, r) {\\n\\t\\te.apply(n, r), (globalThis.queueMicrotask || setTimeout)(\\n\\t\\t\\t() => !n.isConnected && n.dispatchEvent(new Event(O))\\n\\t\\t);\\n\\t}), J(t.prototype, \\\"attributeChangedCallback\\\", function(e, n, r) {\\n\\t\\tlet [o, , c] = r;\\n\\t\\tn.dispatchEvent(new CustomEvent(M, {\\n\\t\\t\\tdetail: [o, c]\\n\\t\\t})), e.apply(n, r);\\n\\t}), t.prototype[C] = !0, t;\\n}\\nfunction J(t, e, n) {\\n\\tt[e] = new Proxy(t[e] || (() => {\\n\\t}), { apply: n });\\n}\\nfunction _t(t) {\\n\\treturn F(t, (e, n) => e.getAttribute(n));\\n}\\n\\n// src/events.js\\nfunction Qt(t, e, n) {\\n\\treturn e || (e = {}), function(o, ...c) {\\n\\t\\tn && (c.unshift(o), o = typeof n == \\\"function\\\" ? n() : n);\\n\\t\\tlet i = c.length ? new CustomEvent(t, Object.assign({ detail: c[0] }, e)) : new Event(t, e);\\n\\t\\treturn o.dispatchEvent(i);\\n\\t};\\n}\\nfunction w(t, e, n) {\\n\\treturn function(o) {\\n\\t\\treturn o.addEventListener(t, e, n), o;\\n\\t};\\n}\\nvar it = (t) => Object.assign({}, typeof t == \\\"object\\\" ? t : null, { once: !0 });\\nw.connected = function(t, e) {\\n\\treturn e = it(e), function(r) {\\n\\t\\treturn r.addEventListener(_, t, e), r[C] ? r : r.isConnected ? (r.dispatchEvent(new Event(_)), r) : (q(e.signal, () => D.offConnected(r, t)) && D.onConnected(r, t), r);\\n\\t};\\n};\\nw.disconnected = function(t, e) {\\n\\treturn e = it(e), function(r) {\\n\\t\\treturn r.addEventListener(O, t, e), r[C] || q(e.signal, () => D.offDisconnected(r, t)) && D.onDisconnected(r, t), r;\\n\\t};\\n};\\nvar Z = /* @__PURE__ */ new WeakMap();\\nw.disconnectedAsAbort = function(t) {\\n\\tif (Z.has(t))\\n\\t\\treturn Z.get(t);\\n\\tlet e = new AbortController();\\n\\treturn Z.set(t, e), t(w.disconnected(() => e.abort())), e;\\n};\\nvar At = /* @__PURE__ */ new WeakSet();\\nw.attributeChanged = function(t, e) {\\n\\treturn typeof e != \\\"object\\\" && (e = {}), function(r) {\\n\\t\\tif (r.addEventListener(M, t, e), r[C] || At.has(r) || !d.M)\\n\\t\\t\\treturn r;\\n\\t\\tlet o = new d.M(function(i) {\\n\\t\\t\\tfor (let { attributeName: a, target: h } of i)\\n\\t\\t\\t\\th.dispatchEvent(\\n\\t\\t\\t\\t\\tnew CustomEvent(M, { detail: [a, h.getAttribute(a)] })\\n\\t\\t\\t\\t);\\n\\t\\t});\\n\\t\\treturn q(e.signal, () => o.disconnect()) && o.observe(r, { attributes: !0 }), r;\\n\\t};\\n};\\n\\n// src/signals-lib.js\\nvar p = \\\"__dde_signal\\\";\\nfunction z(t) {\\n\\ttry {\\n\\t\\treturn T(t, p);\\n\\t} catch {\\n\\t\\treturn !1;\\n\\t}\\n}\\nvar H = [], g = /* @__PURE__ */ new WeakMap();\\nfunction E(t, e) {\\n\\tif (typeof t != \\\"function\\\")\\n\\t\\treturn st(!1, t, e);\\n\\tif (z(t))\\n\\t\\treturn t;\\n\\tlet n = st(!0), r = function() {\\n\\t\\tlet [o, ...c] = g.get(r);\\n\\t\\tif (g.set(r, /* @__PURE__ */ new Set([o])), H.push(r), dt(n, t()), H.pop(), !c.length)\\n\\t\\t\\treturn;\\n\\t\\tlet i = g.get(r);\\n\\t\\tfor (let a of c)\\n\\t\\t\\ti.has(a) || L(a, r);\\n\\t};\\n\\treturn g.set(n[p], r), g.set(r, /* @__PURE__ */ new Set([n])), r(), n;\\n}\\nE.action = function(t, e, ...n) {\\n\\tlet r = t[p], { actions: o } = r;\\n\\tif (!o || !(e in o))\\n\\t\\tthrow new Error(`'${t}' has no action with name '${e}'!`);\\n\\tif (o[e].apply(r, n), r.skip)\\n\\t\\treturn delete r.skip;\\n\\tr.listeners.forEach((c) => c(r.value));\\n};\\nE.on = function t(e, n, r = {}) {\\n\\tlet { signal: o } = r;\\n\\tif (!(o && o.aborted)) {\\n\\t\\tif (Array.isArray(e))\\n\\t\\t\\treturn e.forEach((c) => t(c, n, r));\\n\\t\\tQ(e, n), o && o.addEventListener(\\\"abort\\\", () => L(e, n));\\n\\t}\\n};\\nE.symbols = {\\n\\t//signal: mark,\\n\\tonclear: Symbol.for(\\\"Signal.onclear\\\")\\n};\\nE.clear = function(...t) {\\n\\tfor (let n of t) {\\n\\t\\tlet r = n[p];\\n\\t\\tr && (delete n.toJSON, r.onclear.forEach((o) => o.call(r)), e(n, r), delete n[p]);\\n\\t}\\n\\tfunction e(n, r) {\\n\\t\\tr.listeners.forEach((o) => {\\n\\t\\t\\tif (r.listeners.delete(o), !g.has(o))\\n\\t\\t\\t\\treturn;\\n\\t\\t\\tlet c = g.get(o);\\n\\t\\t\\tc.delete(n), !(c.size > 1) && (n.clear(...c), g.delete(o));\\n\\t\\t});\\n\\t}\\n};\\nvar R = \\\"__dde_reactive\\\";\\nE.el = function(t, e) {\\n\\tlet n = j.mark({ type: \\\"reactive\\\" }, !0), r = n.end, o = d.D.createDocumentFragment();\\n\\to.append(n, r);\\n\\tlet { current: c } = m, i = {}, a = (h) => {\\n\\t\\tif (!n.parentNode || !r.parentNode)\\n\\t\\t\\treturn L(t, a);\\n\\t\\tlet v = i;\\n\\t\\ti = {}, m.push(c);\\n\\t\\tlet l = e(h, function(u, f) {\\n\\t\\t\\tlet b;\\n\\t\\t\\treturn T(v, u) ? (b = v[u], delete v[u]) : b = f(), i[u] = b, b;\\n\\t\\t});\\n\\t\\tm.pop(), Array.isArray(l) || (l = [l]);\\n\\t\\tlet x = document.createComment(\\\"\\\");\\n\\t\\tl.push(x), n.after(...l);\\n\\t\\tlet y;\\n\\t\\tfor (; (y = x.nextSibling) && y !== r; )\\n\\t\\t\\ty.remove();\\n\\t\\tx.remove(), n.isConnected && St(c.host());\\n\\t};\\n\\treturn Q(t, a), ft(t, a, n, e), a(t()), o;\\n};\\nfunction St(t) {\\n\\t!t || !t[R] || (requestIdleCallback || setTimeout)(function() {\\n\\t\\tt[R] = t[R].filter(([e, n]) => n.isConnected ? !0 : (L(...e), !1));\\n\\t});\\n}\\nvar Ct = {\\n\\t_set(t) {\\n\\t\\tthis.value = t;\\n\\t}\\n};\\nfunction Ot(t) {\\n\\treturn function(e, n) {\\n\\t\\tlet r = (...c) => c.length ? e.setAttribute(n, ...c) : K(r), o = at(r, e.getAttribute(n), Ct);\\n\\t\\treturn t[n] = o, o;\\n\\t};\\n}\\nvar G = \\\"__dde_attributes\\\";\\nE.observedAttributes = function(t) {\\n\\tlet e = t[G] = {}, n = F(t, Ot(e));\\n\\treturn w.attributeChanged(function({ detail: o }) {\\n\\t\\t/*! This maps attributes to signals (`S.observedAttributes`).\\n\\t\\t\\t* Investigate `__dde_attributes` key of the element.*/\\n\\t\\tlet [c, i] = o, a = this[G][c];\\n\\t\\tif (a)\\n\\t\\t\\treturn E.action(a, \\\"_set\\\", i);\\n\\t})(t), w.disconnected(function() {\\n\\t\\t/*! This removes all signals mapped to attributes (`S.observedAttributes`).\\n\\t\\t\\t* Investigate `__dde_attributes` key of the element.*/\\n\\t\\tE.clear(...Object.values(this[G]));\\n\\t})(t), n;\\n};\\nvar ut = {\\n\\tisSignal: z,\\n\\tprocessReactiveAttribute(t, e, n, r) {\\n\\t\\tif (!z(n))\\n\\t\\t\\treturn n;\\n\\t\\tlet o = (c) => {\\n\\t\\t\\tif (!t.isConnected)\\n\\t\\t\\t\\treturn L(n, o);\\n\\t\\t\\tr(e, c);\\n\\t\\t};\\n\\t\\treturn Q(n, o), ft(n, o, t, e), n();\\n\\t}\\n};\\nfunction ft(t, e, ...n) {\\n\\tlet { current: r } = m;\\n\\tr.prevent || r.host(function(o) {\\n\\t\\to[R] || (o[R] = [], w.disconnected(\\n\\t\\t\\t() => (\\n\\t\\t\\t\\t/*!\\n\\t\\t\\t\\t* Clears all Signals listeners added in the current scope/host (`S.el`, `assign`, …?).\\n\\t\\t\\t\\t* You can investigate the `__dde_reactive` key of the element.\\n\\t\\t\\t\\t* */\\n\\t\\t\\t\\to[R].forEach(([[c, i]]) => L(c, i, c[p] && c[p].host && c[p].host() === o))\\n\\t\\t\\t)\\n\\t\\t)(o)), o[R].push([[t, e], ...n]);\\n\\t});\\n}\\nfunction st(t, e, n) {\\n\\tlet r = t ? () => K(r) : (...o) => o.length ? dt(r, ...o) : K(r);\\n\\treturn at(r, e, n, t);\\n}\\nvar Dt = Object.assign(/* @__PURE__ */ Object.create(null), {\\n\\tstopPropagation() {\\n\\t\\tthis.skip = !0;\\n\\t}\\n}), V = class extends Error {\\n\\tconstructor() {\\n\\t\\tsuper();\\n\\t\\tlet [e, ...n] = this.stack.split(`\\n`), r = e.slice(e.indexOf(\\\"@\\\"), e.indexOf(\\\".js:\\\") + 4);\\n\\t\\tthis.stack = n.find((o) => !o.includes(r));\\n\\t}\\n};\\nfunction at(t, e, n, r = !1) {\\n\\tlet o = [];\\n\\tX(n) !== \\\"[object Object]\\\" && (n = {});\\n\\tlet { onclear: c } = E.symbols;\\n\\tn[c] && (o.push(n[c]), delete n[c]);\\n\\tlet { host: i } = m;\\n\\treturn Reflect.defineProperty(t, p, {\\n\\t\\tvalue: {\\n\\t\\t\\tvalue: e,\\n\\t\\t\\tactions: n,\\n\\t\\t\\tonclear: o,\\n\\t\\t\\thost: i,\\n\\t\\t\\tlisteners: /* @__PURE__ */ new Set(),\\n\\t\\t\\tdefined: new V().stack,\\n\\t\\t\\treadonly: r\\n\\t\\t},\\n\\t\\tenumerable: !1,\\n\\t\\twritable: !1,\\n\\t\\tconfigurable: !0\\n\\t}), t.toJSON = () => t(), t.valueOf = () => t[p] && t[p].value, Object.setPrototypeOf(t[p], Dt), t;\\n}\\nfunction Rt() {\\n\\treturn H[H.length - 1];\\n}\\nfunction K(t) {\\n\\tif (!t[p])\\n\\t\\treturn;\\n\\tlet { value: e, listeners: n } = t[p], r = Rt();\\n\\treturn r && n.add(r), g.has(r) && g.get(r).add(t), e;\\n}\\nfunction dt(t, e, n) {\\n\\tif (!t[p])\\n\\t\\treturn;\\n\\tlet r = t[p];\\n\\tif (!(!n && r.value === e))\\n\\t\\treturn r.value = e, r.listeners.forEach((o) => o(e)), e;\\n}\\nfunction Q(t, e) {\\n\\tif (t[p])\\n\\t\\treturn t[p].listeners.add(e);\\n}\\nfunction L(t, e, n) {\\n\\tlet r = t[p];\\n\\tif (!r)\\n\\t\\treturn;\\n\\tlet o = r.listeners.delete(e);\\n\\tif (n && !r.listeners.size) {\\n\\t\\tif (E.clear(t), !g.has(r))\\n\\t\\t\\treturn o;\\n\\t\\tlet c = g.get(r);\\n\\t\\tif (!g.has(c))\\n\\t\\t\\treturn o;\\n\\t\\tg.get(c).forEach((i) => L(i, c, !0));\\n\\t}\\n\\treturn o;\\n}\\n\\n// signals.js\\nB(ut);\\nexport {\\n\\tE as S,\\n\\tP as assign,\\n\\tnt as assignAttribute,\\n\\tht as chainableAppend,\\n\\tgt as classListDeclarative,\\n\\tj as createElement,\\n\\tqt as createElementNS,\\n\\tZt as customElementRender,\\n\\tyt as customElementWithDDE,\\n\\tQt as dispatchEvent,\\n\\tj as el,\\n\\tqt as elNS,\\n\\tvt as elementAttribute,\\n\\tFt as empty,\\n\\tz as isSignal,\\n\\tyt as lifecyclesToEvents,\\n\\t_t as observedAttributes,\\n\\tw as on,\\n\\tB as registerReactivity,\\n\\tm as scope,\\n\\tE as signal,\\n\\tWt as simulateSlots\\n};\\n\"}],\"toolbar\":false}"));</script><p>…as you can see, you can use components created based on the documentation previously introduced. To unlock full potential, use with combination <code>customElementWithDDE</code> (allows to use livecycle events) and <code>observedAttributes</code> (converts attributes to render function arguments — <em>default</em>) or <code>S.observedAttributes</code> (converts attributes to signals).</p><div class="notice"><!--<dde:mark type="component" name="mnemonic" host="parentElement" ssr/>--><h3 id="h-mnemonic"><!--<dde:mark type="component" name="h3" host="parentElement" ssr/>--><a href="#h-mnemonic" tabindex="-1">#</a> Mnemonic</h3><ul><li><code>customElementRender(&lt;custom-element&gt;, &lt;connect-target&gt;, &lt;render-function&gt;[, &lt;properties&gt;])</code> — use function to render DOM structure for given &lt;custom-element&gt;</li><li><code>customElementWithDDE(&lt;custom-element&gt;)</code> — register &lt;custom-element&gt; to DDE library, see also `lifecyclesToEvents`, can be also used as decorator</li><li><code>observedAttributes(&lt;custom-element&gt;)</code> — returns record of observed attributes (keys uses camelCase)</li><li><code>S.observedAttributes(&lt;custom-element&gt;)</code> — returns record of observed attributes (keys uses camelCase and values are signals)</li><li><code>lifecyclesToEvents(&lt;class-declaration&gt;)</code> — convert lifecycle methods to events, can be also used as decorator</li></ul></div><div class="prevNext"><!--<dde:mark type="component" name="prevNext" host="parentElement" ssr/>--><a rel="prev" href="p05-scopes" title="Organizing UI into components"><!--<dde:mark type="component" name="pageLink" host="parentElement" ssr/>-->Scopes and components (previous)</a><!--<dde:mark type="component" name="pageLink" host="this" ssr/>--></div></main></body></html>
\ No newline at end of file
+</code></div><script>Flems(document.getElementById("code-example-1-vivfgyxx9kw"), JSON.parse("{\"files\":[{\"name\":\".js\",\"content\":\"import {\\n\\tcustomElementRender,\\n\\tcustomElementWithDDE,\\n} from \\\"./esm-with-signals.js\\\";\\nexport class HTMLCustomElement extends HTMLElement{\\n\\tstatic tagName= \\\"custom-element\\\";\\n\\tstatic observedAttributes= [ \\\"attr\\\" ];\\n\\tconnectedCallback(){\\n\\t\\tcustomElementRender(\\n\\t\\t\\tthis,\\n\\t\\t\\tthis.attachShadow({ mode: \\\"open\\\" }),\\n\\t\\t\\tddeComponent\\n\\t\\t);\\n\\t}\\n\\tset attr(value){ this.setAttribute(\\\"attr\\\", value); }\\n\\tget attr(){ return this.getAttribute(\\\"attr\\\"); }\\n}\\n\\nimport { el, on, scope } from \\\"./esm-with-signals.js\\\";\\nfunction ddeComponent({ attr }){\\n\\tscope.host(\\n\\t\\ton.connected(e=> console.log(e.target.outerHTML)),\\n\\t);\\n\\treturn el().append(\\n\\t\\tel(\\\"p\\\", `Hello from Custom Element with attribute '${attr}'`)\\n\\t);\\n}\\ncustomElementWithDDE(HTMLCustomElement);\\ncustomElements.define(HTMLCustomElement.tagName, HTMLCustomElement);\\n\\ndocument.body.append(\\n\\tel(HTMLCustomElement.tagName, { attr: \\\"Attribute\\\" })\\n);\\n\"},{\"name\":\"esm-with-signals.js\",\"content\":\"// src/signals-common.js\\nvar k = {\\n\\tisSignal(t) {\\n\\t\\treturn !1;\\n\\t},\\n\\tprocessReactiveAttribute(t, e, n, r) {\\n\\t\\treturn n;\\n\\t}\\n};\\nfunction B(t, e = !0) {\\n\\treturn e ? Object.assign(k, t) : (Object.setPrototypeOf(t, k), t);\\n}\\nfunction W(t) {\\n\\treturn k.isPrototypeOf(t) && t !== k ? t : k;\\n}\\n\\n// src/helpers.js\\nvar T = (...t) => Object.prototype.hasOwnProperty.call(...t);\\nfunction S(t) {\\n\\treturn typeof t > \\\"u\\\";\\n}\\nfunction X(t) {\\n\\tlet e = typeof t;\\n\\treturn e !== \\\"object\\\" ? e : t === null ? \\\"null\\\" : Object.prototype.toString.call(t);\\n}\\nfunction q(t, e) {\\n\\tif (!t || !(t instanceof AbortSignal))\\n\\t\\treturn !0;\\n\\tif (!t.aborted)\\n\\t\\treturn t.addEventListener(\\\"abort\\\", e), function() {\\n\\t\\t\\tt.removeEventListener(\\\"abort\\\", e);\\n\\t\\t};\\n}\\nfunction F(t, e) {\\n\\tlet { observedAttributes: n = [] } = t.constructor;\\n\\treturn n.reduce(function(r, o) {\\n\\t\\treturn r[pt(o)] = e(t, o), r;\\n\\t}, {});\\n}\\nfunction pt(t) {\\n\\treturn t.replace(/-./g, (e) => e[1].toUpperCase());\\n}\\n\\n// src/dom-common.js\\nvar d = {\\n\\tsetDeleteAttr: lt,\\n\\tssr: \\\"\\\",\\n\\tD: globalThis.document,\\n\\tF: globalThis.DocumentFragment,\\n\\tH: globalThis.HTMLElement,\\n\\tS: globalThis.SVGElement,\\n\\tM: globalThis.MutationObserver\\n};\\nfunction lt(t, e, n) {\\n\\tif (Reflect.set(t, e, n), !!S(n)) {\\n\\t\\tif (Reflect.deleteProperty(t, e), t instanceof d.H && t.getAttribute(e) === \\\"undefined\\\")\\n\\t\\t\\treturn t.removeAttribute(e);\\n\\t\\tif (Reflect.get(t, e) === \\\"undefined\\\")\\n\\t\\t\\treturn Reflect.set(t, e, \\\"\\\");\\n\\t}\\n}\\nvar C = \\\"__dde_lifecyclesToEvents\\\", _ = \\\"dde:connected\\\", O = \\\"dde:disconnected\\\", M = \\\"dde:attributeChanged\\\";\\n\\n// src/dom.js\\nvar A = [{\\n\\tget scope() {\\n\\t\\treturn d.D.body;\\n\\t},\\n\\thost: (t) => t ? t(d.D.body) : d.D.body,\\n\\tprevent: !0\\n}], m = {\\n\\tget current() {\\n\\t\\treturn A[A.length - 1];\\n\\t},\\n\\tget host() {\\n\\t\\treturn this.current.host;\\n\\t},\\n\\tpreventDefault() {\\n\\t\\tlet { current: t } = this;\\n\\t\\treturn t.prevent = !0, t;\\n\\t},\\n\\tget state() {\\n\\t\\treturn [...A];\\n\\t},\\n\\tpush(t = {}) {\\n\\t\\treturn A.push(Object.assign({}, this.current, { prevent: !1 }, t));\\n\\t},\\n\\tpushRoot() {\\n\\t\\treturn A.push(A[0]);\\n\\t},\\n\\tpop() {\\n\\t\\tif (A.length !== 1)\\n\\t\\t\\treturn A.pop();\\n\\t}\\n};\\nfunction Y(...t) {\\n\\treturn this.appendOriginal(...t), this;\\n}\\nfunction ht(t) {\\n\\treturn t.append === Y || (t.appendOriginal = t.append, t.append = Y), t;\\n}\\nvar $;\\nfunction j(t, e, ...n) {\\n\\tlet r = W(this), o = 0, c, i;\\n\\tswitch ((Object(e) !== e || r.isSignal(e)) && (e = { textContent: e }), !0) {\\n\\t\\tcase typeof t == \\\"function\\\": {\\n\\t\\t\\to = 1, m.push({ scope: t, host: (...v) => v.length ? (o === 1 ? n.unshift(...v) : v.forEach((l) => l(i)), void 0) : i }), c = t(e || void 0);\\n\\t\\t\\tlet a = c instanceof d.F;\\n\\t\\t\\tif (c.nodeName === \\\"#comment\\\")\\n\\t\\t\\t\\tbreak;\\n\\t\\t\\tlet h = j.mark({\\n\\t\\t\\t\\ttype: \\\"component\\\",\\n\\t\\t\\t\\tname: t.name,\\n\\t\\t\\t\\thost: a ? \\\"this\\\" : \\\"parentElement\\\"\\n\\t\\t\\t});\\n\\t\\t\\tc.prepend(h), a && (i = h);\\n\\t\\t\\tbreak;\\n\\t\\t}\\n\\t\\tcase t === \\\"#text\\\":\\n\\t\\t\\tc = P.call(this, d.D.createTextNode(\\\"\\\"), e);\\n\\t\\t\\tbreak;\\n\\t\\tcase (t === \\\"<>\\\" || !t):\\n\\t\\t\\tc = P.call(this, d.D.createDocumentFragment(), e);\\n\\t\\t\\tbreak;\\n\\t\\tcase !!$:\\n\\t\\t\\tc = P.call(this, d.D.createElementNS($, t), e);\\n\\t\\t\\tbreak;\\n\\t\\tcase !c:\\n\\t\\t\\tc = P.call(this, d.D.createElement(t), e);\\n\\t}\\n\\treturn ht(c), i || (i = c), n.forEach((a) => a(i)), o && m.pop(), o = 2, c;\\n}\\nfunction Wt(t, e = t, n = void 0) {\\n\\tlet r = Symbol.for(\\\"default\\\"), o = Array.from(e.querySelectorAll(\\\"slot\\\")).reduce((i, a) => Reflect.set(i, a.name || r, a) && i, {}), c = T(o, r);\\n\\tif (t.append = new Proxy(t.append, {\\n\\t\\tapply(i, a, h) {\\n\\t\\t\\tif (!h.length)\\n\\t\\t\\t\\treturn t;\\n\\t\\t\\tlet v = d.D.createDocumentFragment();\\n\\t\\t\\tfor (let l of h) {\\n\\t\\t\\t\\tif (!l || !l.slot) {\\n\\t\\t\\t\\t\\tc && v.appendChild(l);\\n\\t\\t\\t\\t\\tcontinue;\\n\\t\\t\\t\\t}\\n\\t\\t\\t\\tlet x = l.slot, y = o[x];\\n\\t\\t\\t\\tvt(l, \\\"remove\\\", \\\"slot\\\"), y && (bt(y, l, n), Reflect.deleteProperty(o, x));\\n\\t\\t\\t}\\n\\t\\t\\treturn c && (o[r].replaceWith(v), Reflect.deleteProperty(o, r)), t.append = i, t;\\n\\t\\t}\\n\\t}), t !== e) {\\n\\t\\tlet i = Array.from(t.childNodes);\\n\\t\\ti.forEach((a) => a.remove()), t.append(...i);\\n\\t}\\n\\treturn e;\\n}\\nfunction bt(t, e, n) {\\n\\tn && n(t, e);\\n\\ttry {\\n\\t\\tt.replaceWith(P(e, { className: [e.className, t.className], dataset: { ...t.dataset } }));\\n\\t} catch {\\n\\t\\tt.replaceWith(e);\\n\\t}\\n}\\nj.mark = function(t, e = !1) {\\n\\tt = Object.entries(t).map(([o, c]) => o + `=\\\"${c}\\\"`).join(\\\" \\\");\\n\\tlet n = e ? \\\"\\\" : \\\"/\\\", r = d.D.createComment(`<dde:mark ${t}${d.ssr}${n}>`);\\n\\treturn e && (r.end = d.D.createComment(\\\"</dde:mark>\\\")), r;\\n};\\nfunction qt(t) {\\n\\tlet e = this;\\n\\treturn function(...r) {\\n\\t\\t$ = t;\\n\\t\\tlet o = j.call(e, ...r);\\n\\t\\treturn $ = void 0, o;\\n\\t};\\n}\\nvar U = /* @__PURE__ */ new WeakMap(), { setDeleteAttr: tt } = d;\\nfunction P(t, ...e) {\\n\\tif (!e.length)\\n\\t\\treturn t;\\n\\tU.set(t, rt(t, this));\\n\\tfor (let [n, r] of Object.entries(Object.assign({}, ...e)))\\n\\t\\tnt.call(this, t, n, r);\\n\\treturn U.delete(t), t;\\n}\\nfunction nt(t, e, n) {\\n\\tlet { setRemoveAttr: r, s: o } = rt(t, this), c = this;\\n\\tn = o.processReactiveAttribute(\\n\\t\\tt,\\n\\t\\te,\\n\\t\\tn,\\n\\t\\t(a, h) => nt.call(c, t, a, h)\\n\\t);\\n\\tlet [i] = e;\\n\\tif (i === \\\"=\\\")\\n\\t\\treturn r(e.slice(1), n);\\n\\tif (i === \\\".\\\")\\n\\t\\treturn et(t, e.slice(1), n);\\n\\tif (/(aria|data)([A-Z])/.test(e))\\n\\t\\treturn e = e.replace(/([a-z])([A-Z])/g, \\\"$1-$2\\\").toLowerCase(), r(e, n);\\n\\tswitch (e === \\\"className\\\" && (e = \\\"class\\\"), e) {\\n\\t\\tcase \\\"xlink:href\\\":\\n\\t\\t\\treturn r(e, n, \\\"http://www.w3.org/1999/xlink\\\");\\n\\t\\tcase \\\"textContent\\\":\\n\\t\\t\\treturn tt(t, e, n);\\n\\t\\tcase \\\"style\\\":\\n\\t\\t\\tif (typeof n != \\\"object\\\")\\n\\t\\t\\t\\tbreak;\\n\\t\\tcase \\\"dataset\\\":\\n\\t\\t\\treturn I(o, n, et.bind(null, t[e]));\\n\\t\\tcase \\\"ariaset\\\":\\n\\t\\t\\treturn I(o, n, (a, h) => r(\\\"aria-\\\" + a, h));\\n\\t\\tcase \\\"classList\\\":\\n\\t\\t\\treturn gt.call(c, t, n);\\n\\t}\\n\\treturn Et(t, e) ? tt(t, e, n) : r(e, n);\\n}\\nfunction rt(t, e) {\\n\\tif (U.has(t))\\n\\t\\treturn U.get(t);\\n\\tlet r = (t instanceof d.S ? xt : mt).bind(null, t, \\\"Attribute\\\"), o = W(e);\\n\\treturn { setRemoveAttr: r, s: o };\\n}\\nfunction gt(t, e) {\\n\\tlet n = W(this);\\n\\treturn I(\\n\\t\\tn,\\n\\t\\te,\\n\\t\\t(r, o) => t.classList.toggle(r, o === -1 ? void 0 : !!o)\\n\\t), t;\\n}\\nfunction Ft(t) {\\n\\treturn Array.from(t.children).forEach((e) => e.remove()), t;\\n}\\nfunction vt(t, e, n, r) {\\n\\treturn t instanceof d.H ? t[e + \\\"Attribute\\\"](n, r) : t[e + \\\"AttributeNS\\\"](null, n, r);\\n}\\nfunction Et(t, e) {\\n\\tif (!(e in t))\\n\\t\\treturn !1;\\n\\tlet n = ot(t, e);\\n\\treturn !S(n.set);\\n}\\nfunction ot(t, e) {\\n\\tif (t = Object.getPrototypeOf(t), !t)\\n\\t\\treturn {};\\n\\tlet n = Object.getOwnPropertyDescriptor(t, e);\\n\\treturn n || ot(t, e);\\n}\\nfunction I(t, e, n) {\\n\\tif (!(typeof e != \\\"object\\\" || e === null))\\n\\t\\treturn Object.entries(e).forEach(function([o, c]) {\\n\\t\\t\\to && (c = t.processReactiveAttribute(e, o, c, n), n(o, c));\\n\\t\\t});\\n}\\nfunction ct(t) {\\n\\treturn Array.isArray(t) ? t.filter(Boolean).join(\\\" \\\") : t;\\n}\\nfunction mt(t, e, n, r) {\\n\\treturn t[(S(r) ? \\\"remove\\\" : \\\"set\\\") + e](n, ct(r));\\n}\\nfunction xt(t, e, n, r, o = null) {\\n\\treturn t[(S(r) ? \\\"remove\\\" : \\\"set\\\") + e + \\\"NS\\\"](o, n, ct(r));\\n}\\nfunction et(t, e, n) {\\n\\tif (Reflect.set(t, e, n), !!S(n))\\n\\t\\treturn Reflect.deleteProperty(t, e);\\n}\\n\\n// src/events-observer.js\\nvar D = d.M ? wt() : new Proxy({}, {\\n\\tget() {\\n\\t\\treturn () => {\\n\\t\\t};\\n\\t}\\n});\\nfunction wt() {\\n\\tlet t = /* @__PURE__ */ new Map(), e = !1, n = (s) => function(u) {\\n\\t\\tfor (let f of u)\\n\\t\\t\\tif (f.type === \\\"childList\\\") {\\n\\t\\t\\t\\tif (l(f.addedNodes, !0)) {\\n\\t\\t\\t\\t\\ts();\\n\\t\\t\\t\\t\\tcontinue;\\n\\t\\t\\t\\t}\\n\\t\\t\\t\\tx(f.removedNodes, !0) && s();\\n\\t\\t\\t}\\n\\t}, r = new d.M(n(a));\\n\\treturn {\\n\\t\\tobserve(s) {\\n\\t\\t\\tlet u = new d.M(n(() => {\\n\\t\\t\\t}));\\n\\t\\t\\treturn u.observe(s, { childList: !0, subtree: !0 }), () => u.disconnect();\\n\\t\\t},\\n\\t\\tonConnected(s, u) {\\n\\t\\t\\ti();\\n\\t\\t\\tlet f = c(s);\\n\\t\\t\\tf.connected.has(u) || (f.connected.add(u), f.length_c += 1);\\n\\t\\t},\\n\\t\\toffConnected(s, u) {\\n\\t\\t\\tif (!t.has(s))\\n\\t\\t\\t\\treturn;\\n\\t\\t\\tlet f = t.get(s);\\n\\t\\t\\tf.connected.has(u) && (f.connected.delete(u), f.length_c -= 1, o(s, f));\\n\\t\\t},\\n\\t\\tonDisconnected(s, u) {\\n\\t\\t\\ti();\\n\\t\\t\\tlet f = c(s);\\n\\t\\t\\tf.disconnected.has(u) || (f.disconnected.add(u), f.length_d += 1);\\n\\t\\t},\\n\\t\\toffDisconnected(s, u) {\\n\\t\\t\\tif (!t.has(s))\\n\\t\\t\\t\\treturn;\\n\\t\\t\\tlet f = t.get(s);\\n\\t\\t\\tf.disconnected.has(u) && (f.disconnected.delete(u), f.length_d -= 1, o(s, f));\\n\\t\\t}\\n\\t};\\n\\tfunction o(s, u) {\\n\\t\\tu.length_c || u.length_d || (t.delete(s), a());\\n\\t}\\n\\tfunction c(s) {\\n\\t\\tif (t.has(s))\\n\\t\\t\\treturn t.get(s);\\n\\t\\tlet u = {\\n\\t\\t\\tconnected: /* @__PURE__ */ new WeakSet(),\\n\\t\\t\\tlength_c: 0,\\n\\t\\t\\tdisconnected: /* @__PURE__ */ new WeakSet(),\\n\\t\\t\\tlength_d: 0\\n\\t\\t};\\n\\t\\treturn t.set(s, u), u;\\n\\t}\\n\\tfunction i() {\\n\\t\\te || (e = !0, r.observe(d.D.body, { childList: !0, subtree: !0 }));\\n\\t}\\n\\tfunction a() {\\n\\t\\t!e || t.size || (e = !1, r.disconnect());\\n\\t}\\n\\tfunction h() {\\n\\t\\treturn new Promise(function(s) {\\n\\t\\t\\t(requestIdleCallback || requestAnimationFrame)(s);\\n\\t\\t});\\n\\t}\\n\\tasync function v(s) {\\n\\t\\tt.size > 30 && await h();\\n\\t\\tlet u = [];\\n\\t\\tif (!(s instanceof Node))\\n\\t\\t\\treturn u;\\n\\t\\tfor (let f of t.keys())\\n\\t\\t\\tf === s || !(f instanceof Node) || s.contains(f) && u.push(f);\\n\\t\\treturn u;\\n\\t}\\n\\tfunction l(s, u) {\\n\\t\\tlet f = !1;\\n\\t\\tfor (let b of s) {\\n\\t\\t\\tif (u && v(b).then(l), !t.has(b))\\n\\t\\t\\t\\tcontinue;\\n\\t\\t\\tlet N = t.get(b);\\n\\t\\t\\tN.length_c && (b.dispatchEvent(new Event(_)), N.connected = /* @__PURE__ */ new WeakSet(), N.length_c = 0, N.length_d || t.delete(b), f = !0);\\n\\t\\t}\\n\\t\\treturn f;\\n\\t}\\n\\tfunction x(s, u) {\\n\\t\\tlet f = !1;\\n\\t\\tfor (let b of s)\\n\\t\\t\\tu && v(b).then(x), !(!t.has(b) || !t.get(b).length_d) && ((globalThis.queueMicrotask || setTimeout)(y(b)), f = !0);\\n\\t\\treturn f;\\n\\t}\\n\\tfunction y(s) {\\n\\t\\treturn () => {\\n\\t\\t\\ts.isConnected || (s.dispatchEvent(new Event(O)), t.delete(s));\\n\\t\\t};\\n\\t}\\n}\\n\\n// src/customElement.js\\nfunction Zt(t, e, n, r = _t) {\\n\\tm.push({\\n\\t\\tscope: t,\\n\\t\\thost: (...i) => i.length ? i.forEach((a) => a(t)) : t\\n\\t}), typeof r == \\\"function\\\" && (r = r.call(t, t));\\n\\tlet o = t[C];\\n\\to || yt(t);\\n\\tlet c = n.call(t, r);\\n\\treturn o || t.dispatchEvent(new Event(_)), e.nodeType === 11 && typeof e.mode == \\\"string\\\" && t.addEventListener(O, D.observe(e), { once: !0 }), m.pop(), e.append(c);\\n}\\nfunction yt(t) {\\n\\treturn J(t.prototype, \\\"connectedCallback\\\", function(e, n, r) {\\n\\t\\te.apply(n, r), n.dispatchEvent(new Event(_));\\n\\t}), J(t.prototype, \\\"disconnectedCallback\\\", function(e, n, r) {\\n\\t\\te.apply(n, r), (globalThis.queueMicrotask || setTimeout)(\\n\\t\\t\\t() => !n.isConnected && n.dispatchEvent(new Event(O))\\n\\t\\t);\\n\\t}), J(t.prototype, \\\"attributeChangedCallback\\\", function(e, n, r) {\\n\\t\\tlet [o, , c] = r;\\n\\t\\tn.dispatchEvent(new CustomEvent(M, {\\n\\t\\t\\tdetail: [o, c]\\n\\t\\t})), e.apply(n, r);\\n\\t}), t.prototype[C] = !0, t;\\n}\\nfunction J(t, e, n) {\\n\\tt[e] = new Proxy(t[e] || (() => {\\n\\t}), { apply: n });\\n}\\nfunction _t(t) {\\n\\treturn F(t, (e, n) => e.getAttribute(n));\\n}\\n\\n// src/events.js\\nfunction Qt(t, e, n) {\\n\\treturn e || (e = {}), function(o, ...c) {\\n\\t\\tn && (c.unshift(o), o = typeof n == \\\"function\\\" ? n() : n);\\n\\t\\tlet i = c.length ? new CustomEvent(t, Object.assign({ detail: c[0] }, e)) : new Event(t, e);\\n\\t\\treturn o.dispatchEvent(i);\\n\\t};\\n}\\nfunction w(t, e, n) {\\n\\treturn function(o) {\\n\\t\\treturn o.addEventListener(t, e, n), o;\\n\\t};\\n}\\nvar it = (t) => Object.assign({}, typeof t == \\\"object\\\" ? t : null, { once: !0 });\\nw.connected = function(t, e) {\\n\\treturn e = it(e), function(r) {\\n\\t\\treturn r.addEventListener(_, t, e), r[C] ? r : r.isConnected ? (r.dispatchEvent(new Event(_)), r) : (q(e.signal, () => D.offConnected(r, t)) && D.onConnected(r, t), r);\\n\\t};\\n};\\nw.disconnected = function(t, e) {\\n\\treturn e = it(e), function(r) {\\n\\t\\treturn r.addEventListener(O, t, e), r[C] || q(e.signal, () => D.offDisconnected(r, t)) && D.onDisconnected(r, t), r;\\n\\t};\\n};\\nvar Z = /* @__PURE__ */ new WeakMap();\\nw.disconnectedAsAbort = function(t) {\\n\\tif (Z.has(t))\\n\\t\\treturn Z.get(t);\\n\\tlet e = new AbortController();\\n\\treturn Z.set(t, e), t(w.disconnected(() => e.abort())), e;\\n};\\nvar At = /* @__PURE__ */ new WeakSet();\\nw.attributeChanged = function(t, e) {\\n\\treturn typeof e != \\\"object\\\" && (e = {}), function(r) {\\n\\t\\tif (r.addEventListener(M, t, e), r[C] || At.has(r) || !d.M)\\n\\t\\t\\treturn r;\\n\\t\\tlet o = new d.M(function(i) {\\n\\t\\t\\tfor (let { attributeName: a, target: h } of i)\\n\\t\\t\\t\\th.dispatchEvent(\\n\\t\\t\\t\\t\\tnew CustomEvent(M, { detail: [a, h.getAttribute(a)] })\\n\\t\\t\\t\\t);\\n\\t\\t});\\n\\t\\treturn q(e.signal, () => o.disconnect()) && o.observe(r, { attributes: !0 }), r;\\n\\t};\\n};\\n\\n// src/signals-lib.js\\nvar p = \\\"__dde_signal\\\";\\nfunction z(t) {\\n\\ttry {\\n\\t\\treturn T(t, p);\\n\\t} catch {\\n\\t\\treturn !1;\\n\\t}\\n}\\nvar H = [], g = /* @__PURE__ */ new WeakMap();\\nfunction E(t, e) {\\n\\tif (typeof t != \\\"function\\\")\\n\\t\\treturn st(!1, t, e);\\n\\tif (z(t))\\n\\t\\treturn t;\\n\\tlet n = st(!0), r = function() {\\n\\t\\tlet [o, ...c] = g.get(r);\\n\\t\\tif (g.set(r, /* @__PURE__ */ new Set([o])), H.push(r), dt(n, t()), H.pop(), !c.length)\\n\\t\\t\\treturn;\\n\\t\\tlet i = g.get(r);\\n\\t\\tfor (let a of c)\\n\\t\\t\\ti.has(a) || L(a, r);\\n\\t};\\n\\treturn g.set(n[p], r), g.set(r, /* @__PURE__ */ new Set([n])), r(), n;\\n}\\nE.action = function(t, e, ...n) {\\n\\tlet r = t[p], { actions: o } = r;\\n\\tif (!o || !(e in o))\\n\\t\\tthrow new Error(`'${t}' has no action with name '${e}'!`);\\n\\tif (o[e].apply(r, n), r.skip)\\n\\t\\treturn delete r.skip;\\n\\tr.listeners.forEach((c) => c(r.value));\\n};\\nE.on = function t(e, n, r = {}) {\\n\\tlet { signal: o } = r;\\n\\tif (!(o && o.aborted)) {\\n\\t\\tif (Array.isArray(e))\\n\\t\\t\\treturn e.forEach((c) => t(c, n, r));\\n\\t\\tQ(e, n), o && o.addEventListener(\\\"abort\\\", () => L(e, n));\\n\\t}\\n};\\nE.symbols = {\\n\\t//signal: mark,\\n\\tonclear: Symbol.for(\\\"Signal.onclear\\\")\\n};\\nE.clear = function(...t) {\\n\\tfor (let n of t) {\\n\\t\\tlet r = n[p];\\n\\t\\tr && (delete n.toJSON, r.onclear.forEach((o) => o.call(r)), e(n, r), delete n[p]);\\n\\t}\\n\\tfunction e(n, r) {\\n\\t\\tr.listeners.forEach((o) => {\\n\\t\\t\\tif (r.listeners.delete(o), !g.has(o))\\n\\t\\t\\t\\treturn;\\n\\t\\t\\tlet c = g.get(o);\\n\\t\\t\\tc.delete(n), !(c.size > 1) && (n.clear(...c), g.delete(o));\\n\\t\\t});\\n\\t}\\n};\\nvar R = \\\"__dde_reactive\\\";\\nE.el = function(t, e) {\\n\\tlet n = j.mark({ type: \\\"reactive\\\" }, !0), r = n.end, o = d.D.createDocumentFragment();\\n\\to.append(n, r);\\n\\tlet { current: c } = m, i = {}, a = (h) => {\\n\\t\\tif (!n.parentNode || !r.parentNode)\\n\\t\\t\\treturn L(t, a);\\n\\t\\tlet v = i;\\n\\t\\ti = {}, m.push(c);\\n\\t\\tlet l = e(h, function(u, f) {\\n\\t\\t\\tlet b;\\n\\t\\t\\treturn T(v, u) ? (b = v[u], delete v[u]) : b = f(), i[u] = b, b;\\n\\t\\t});\\n\\t\\tm.pop(), Array.isArray(l) || (l = [l]);\\n\\t\\tlet x = document.createComment(\\\"\\\");\\n\\t\\tl.push(x), n.after(...l);\\n\\t\\tlet y;\\n\\t\\tfor (; (y = x.nextSibling) && y !== r; )\\n\\t\\t\\ty.remove();\\n\\t\\tx.remove(), n.isConnected && St(c.host());\\n\\t};\\n\\treturn Q(t, a), ft(t, a, n, e), a(t()), o;\\n};\\nfunction St(t) {\\n\\t!t || !t[R] || (requestIdleCallback || setTimeout)(function() {\\n\\t\\tt[R] = t[R].filter(([e, n]) => n.isConnected ? !0 : (L(...e), !1));\\n\\t});\\n}\\nvar Ct = {\\n\\t_set(t) {\\n\\t\\tthis.value = t;\\n\\t}\\n};\\nfunction Ot(t) {\\n\\treturn function(e, n) {\\n\\t\\tlet r = (...c) => c.length ? e.setAttribute(n, ...c) : K(r), o = at(r, e.getAttribute(n), Ct);\\n\\t\\treturn t[n] = o, o;\\n\\t};\\n}\\nvar G = \\\"__dde_attributes\\\";\\nE.observedAttributes = function(t) {\\n\\tlet e = t[G] = {}, n = F(t, Ot(e));\\n\\treturn w.attributeChanged(function({ detail: o }) {\\n\\t\\t/*! This maps attributes to signals (`S.observedAttributes`).\\n\\t\\t\\t* Investigate `__dde_attributes` key of the element.*/\\n\\t\\tlet [c, i] = o, a = this[G][c];\\n\\t\\tif (a)\\n\\t\\t\\treturn E.action(a, \\\"_set\\\", i);\\n\\t})(t), w.disconnected(function() {\\n\\t\\t/*! This removes all signals mapped to attributes (`S.observedAttributes`).\\n\\t\\t\\t* Investigate `__dde_attributes` key of the element.*/\\n\\t\\tE.clear(...Object.values(this[G]));\\n\\t})(t), n;\\n};\\nvar ut = {\\n\\tisSignal: z,\\n\\tprocessReactiveAttribute(t, e, n, r) {\\n\\t\\tif (!z(n))\\n\\t\\t\\treturn n;\\n\\t\\tlet o = (c) => {\\n\\t\\t\\tif (!t.isConnected)\\n\\t\\t\\t\\treturn L(n, o);\\n\\t\\t\\tr(e, c);\\n\\t\\t};\\n\\t\\treturn Q(n, o), ft(n, o, t, e), n();\\n\\t}\\n};\\nfunction ft(t, e, ...n) {\\n\\tlet { current: r } = m;\\n\\tr.prevent || r.host(function(o) {\\n\\t\\to[R] || (o[R] = [], w.disconnected(\\n\\t\\t\\t() => (\\n\\t\\t\\t\\t/*!\\n\\t\\t\\t\\t* Clears all Signals listeners added in the current scope/host (`S.el`, `assign`, …?).\\n\\t\\t\\t\\t* You can investigate the `__dde_reactive` key of the element.\\n\\t\\t\\t\\t* */\\n\\t\\t\\t\\to[R].forEach(([[c, i]]) => L(c, i, c[p] && c[p].host && c[p].host() === o))\\n\\t\\t\\t)\\n\\t\\t)(o)), o[R].push([[t, e], ...n]);\\n\\t});\\n}\\nfunction st(t, e, n) {\\n\\tlet r = t ? () => K(r) : (...o) => o.length ? dt(r, ...o) : K(r);\\n\\treturn at(r, e, n, t);\\n}\\nvar Dt = Object.assign(/* @__PURE__ */ Object.create(null), {\\n\\tstopPropagation() {\\n\\t\\tthis.skip = !0;\\n\\t}\\n}), V = class extends Error {\\n\\tconstructor() {\\n\\t\\tsuper();\\n\\t\\tlet [e, ...n] = this.stack.split(`\\n`), r = e.slice(e.indexOf(\\\"@\\\"), e.indexOf(\\\".js:\\\") + 4);\\n\\t\\tthis.stack = n.find((o) => !o.includes(r));\\n\\t}\\n};\\nfunction at(t, e, n, r = !1) {\\n\\tlet o = [];\\n\\tX(n) !== \\\"[object Object]\\\" && (n = {});\\n\\tlet { onclear: c } = E.symbols;\\n\\tn[c] && (o.push(n[c]), delete n[c]);\\n\\tlet { host: i } = m;\\n\\treturn Reflect.defineProperty(t, p, {\\n\\t\\tvalue: {\\n\\t\\t\\tvalue: e,\\n\\t\\t\\tactions: n,\\n\\t\\t\\tonclear: o,\\n\\t\\t\\thost: i,\\n\\t\\t\\tlisteners: /* @__PURE__ */ new Set(),\\n\\t\\t\\tdefined: new V().stack,\\n\\t\\t\\treadonly: r\\n\\t\\t},\\n\\t\\tenumerable: !1,\\n\\t\\twritable: !1,\\n\\t\\tconfigurable: !0\\n\\t}), t.toJSON = () => t(), t.valueOf = () => t[p] && t[p].value, Object.setPrototypeOf(t[p], Dt), t;\\n}\\nfunction Rt() {\\n\\treturn H[H.length - 1];\\n}\\nfunction K(t) {\\n\\tif (!t[p])\\n\\t\\treturn;\\n\\tlet { value: e, listeners: n } = t[p], r = Rt();\\n\\treturn r && n.add(r), g.has(r) && g.get(r).add(t), e;\\n}\\nfunction dt(t, e, n) {\\n\\tif (!t[p])\\n\\t\\treturn;\\n\\tlet r = t[p];\\n\\tif (!(!n && r.value === e))\\n\\t\\treturn r.value = e, r.listeners.forEach((o) => o(e)), e;\\n}\\nfunction Q(t, e) {\\n\\tif (t[p])\\n\\t\\treturn t[p].listeners.add(e);\\n}\\nfunction L(t, e, n) {\\n\\tlet r = t[p];\\n\\tif (!r)\\n\\t\\treturn;\\n\\tlet o = r.listeners.delete(e);\\n\\tif (n && !r.listeners.size) {\\n\\t\\tif (E.clear(t), !g.has(r))\\n\\t\\t\\treturn o;\\n\\t\\tlet c = g.get(r);\\n\\t\\tif (!g.has(c))\\n\\t\\t\\treturn o;\\n\\t\\tg.get(c).forEach((i) => L(i, c, !0));\\n\\t}\\n\\treturn o;\\n}\\n\\n// signals.js\\nB(ut);\\nexport {\\n\\tE as S,\\n\\tP as assign,\\n\\tnt as assignAttribute,\\n\\tht as chainableAppend,\\n\\tgt as classListDeclarative,\\n\\tj as createElement,\\n\\tqt as createElementNS,\\n\\tZt as customElementRender,\\n\\tyt as customElementWithDDE,\\n\\tQt as dispatchEvent,\\n\\tj as el,\\n\\tqt as elNS,\\n\\tvt as elementAttribute,\\n\\tFt as empty,\\n\\tz as isSignal,\\n\\tyt as lifecyclesToEvents,\\n\\t_t as observedAttributes,\\n\\tw as on,\\n\\tB as registerReactivity,\\n\\tm as scope,\\n\\tE as signal,\\n\\tWt as simulateSlots\\n};\\n\"}],\"toolbar\":false}"));</script><p>…as you can see, you can use components created based on the documentation previously introduced. To unlock full potential, use with combination <code>customElementWithDDE</code> (allows to use livecycle events) and <code>observedAttributes</code> (converts attributes to render function arguments — <em>default</em>) or <code>S.observedAttributes</code> (converts attributes to signals).</p><!--<dde:mark type="component" name="example" host="this" ssr/>--><div id="code-example-1-u3dl2tjmoj4" class="example"><!--<dde:mark type="component" name="code" host="parentElement" ssr/>--><code class="language-js">import {
+	customElementRender,
+	customElementWithDDE,
+	observedAttributes,
+	el, on, scope 
+} from "./esm-with-signals.js";
+import { S } from "./esm-with-signals.js";
+export class HTMLCustomElement extends HTMLElement{
+	static tagName= "custom-element";
+	static observedAttributes= [ "attr" ];
+	connectedCallback(){
+		console.log(observedAttributes(this));
+		customElementRender(
+			this,
+			this.attachShadow({ mode: "open" }),
+			ddeComponent,
+			S.observedAttributes
+		);
+	}
+	set attr(value){ this.setAttribute("attr", value); }
+	get attr(){ return this.getAttribute("attr"); }
+}
+
+/** @param {{ attr: ddeSignal&lt;string, {}&gt; }} props */
+function ddeComponent({ attr }){
+	scope.host(
+		on.connected(e=&gt; console.log(e.target.outerHTML)),
+	);
+	return el().append(
+		el("p", S(()=&gt; `Hello from Custom Element with attribute '${attr()}'`))
+	);
+}
+customElementWithDDE(HTMLCustomElement);
+customElements.define(HTMLCustomElement.tagName, HTMLCustomElement);
+
+document.body.append(
+	el(HTMLCustomElement.tagName, { attr: "Attribute" })
+);
+setTimeout(
+	()=&gt; document.querySelector(HTMLCustomElement.tagName).setAttribute("attr", "New Value"),
+	3*750
+);
+</code></div><script>Flems(document.getElementById("code-example-1-u3dl2tjmoj4"), JSON.parse("{\"files\":[{\"name\":\".js\",\"content\":\"import {\\n\\tcustomElementRender,\\n\\tcustomElementWithDDE,\\n\\tobservedAttributes,\\n\\tel, on, scope \\n} from \\\"./esm-with-signals.js\\\";\\nimport { S } from \\\"./esm-with-signals.js\\\";\\nexport class HTMLCustomElement extends HTMLElement{\\n\\tstatic tagName= \\\"custom-element\\\";\\n\\tstatic observedAttributes= [ \\\"attr\\\" ];\\n\\tconnectedCallback(){\\n\\t\\tconsole.log(observedAttributes(this));\\n\\t\\tcustomElementRender(\\n\\t\\t\\tthis,\\n\\t\\t\\tthis.attachShadow({ mode: \\\"open\\\" }),\\n\\t\\t\\tddeComponent,\\n\\t\\t\\tS.observedAttributes\\n\\t\\t);\\n\\t}\\n\\tset attr(value){ this.setAttribute(\\\"attr\\\", value); }\\n\\tget attr(){ return this.getAttribute(\\\"attr\\\"); }\\n}\\n\\n/** @param {{ attr: ddeSignal<string, {}> }} props */\\nfunction ddeComponent({ attr }){\\n\\tscope.host(\\n\\t\\ton.connected(e=> console.log(e.target.outerHTML)),\\n\\t);\\n\\treturn el().append(\\n\\t\\tel(\\\"p\\\", S(()=> `Hello from Custom Element with attribute '${attr()}'`))\\n\\t);\\n}\\ncustomElementWithDDE(HTMLCustomElement);\\ncustomElements.define(HTMLCustomElement.tagName, HTMLCustomElement);\\n\\ndocument.body.append(\\n\\tel(HTMLCustomElement.tagName, { attr: \\\"Attribute\\\" })\\n);\\nsetTimeout(\\n\\t()=> document.querySelector(HTMLCustomElement.tagName).setAttribute(\\\"attr\\\", \\\"New Value\\\"),\\n\\t3*750\\n);\\n\"},{\"name\":\"esm-with-signals.js\",\"content\":\"// src/signals-common.js\\nvar k = {\\n\\tisSignal(t) {\\n\\t\\treturn !1;\\n\\t},\\n\\tprocessReactiveAttribute(t, e, n, r) {\\n\\t\\treturn n;\\n\\t}\\n};\\nfunction B(t, e = !0) {\\n\\treturn e ? Object.assign(k, t) : (Object.setPrototypeOf(t, k), t);\\n}\\nfunction W(t) {\\n\\treturn k.isPrototypeOf(t) && t !== k ? t : k;\\n}\\n\\n// src/helpers.js\\nvar T = (...t) => Object.prototype.hasOwnProperty.call(...t);\\nfunction S(t) {\\n\\treturn typeof t > \\\"u\\\";\\n}\\nfunction X(t) {\\n\\tlet e = typeof t;\\n\\treturn e !== \\\"object\\\" ? e : t === null ? \\\"null\\\" : Object.prototype.toString.call(t);\\n}\\nfunction q(t, e) {\\n\\tif (!t || !(t instanceof AbortSignal))\\n\\t\\treturn !0;\\n\\tif (!t.aborted)\\n\\t\\treturn t.addEventListener(\\\"abort\\\", e), function() {\\n\\t\\t\\tt.removeEventListener(\\\"abort\\\", e);\\n\\t\\t};\\n}\\nfunction F(t, e) {\\n\\tlet { observedAttributes: n = [] } = t.constructor;\\n\\treturn n.reduce(function(r, o) {\\n\\t\\treturn r[pt(o)] = e(t, o), r;\\n\\t}, {});\\n}\\nfunction pt(t) {\\n\\treturn t.replace(/-./g, (e) => e[1].toUpperCase());\\n}\\n\\n// src/dom-common.js\\nvar d = {\\n\\tsetDeleteAttr: lt,\\n\\tssr: \\\"\\\",\\n\\tD: globalThis.document,\\n\\tF: globalThis.DocumentFragment,\\n\\tH: globalThis.HTMLElement,\\n\\tS: globalThis.SVGElement,\\n\\tM: globalThis.MutationObserver\\n};\\nfunction lt(t, e, n) {\\n\\tif (Reflect.set(t, e, n), !!S(n)) {\\n\\t\\tif (Reflect.deleteProperty(t, e), t instanceof d.H && t.getAttribute(e) === \\\"undefined\\\")\\n\\t\\t\\treturn t.removeAttribute(e);\\n\\t\\tif (Reflect.get(t, e) === \\\"undefined\\\")\\n\\t\\t\\treturn Reflect.set(t, e, \\\"\\\");\\n\\t}\\n}\\nvar C = \\\"__dde_lifecyclesToEvents\\\", _ = \\\"dde:connected\\\", O = \\\"dde:disconnected\\\", M = \\\"dde:attributeChanged\\\";\\n\\n// src/dom.js\\nvar A = [{\\n\\tget scope() {\\n\\t\\treturn d.D.body;\\n\\t},\\n\\thost: (t) => t ? t(d.D.body) : d.D.body,\\n\\tprevent: !0\\n}], m = {\\n\\tget current() {\\n\\t\\treturn A[A.length - 1];\\n\\t},\\n\\tget host() {\\n\\t\\treturn this.current.host;\\n\\t},\\n\\tpreventDefault() {\\n\\t\\tlet { current: t } = this;\\n\\t\\treturn t.prevent = !0, t;\\n\\t},\\n\\tget state() {\\n\\t\\treturn [...A];\\n\\t},\\n\\tpush(t = {}) {\\n\\t\\treturn A.push(Object.assign({}, this.current, { prevent: !1 }, t));\\n\\t},\\n\\tpushRoot() {\\n\\t\\treturn A.push(A[0]);\\n\\t},\\n\\tpop() {\\n\\t\\tif (A.length !== 1)\\n\\t\\t\\treturn A.pop();\\n\\t}\\n};\\nfunction Y(...t) {\\n\\treturn this.appendOriginal(...t), this;\\n}\\nfunction ht(t) {\\n\\treturn t.append === Y || (t.appendOriginal = t.append, t.append = Y), t;\\n}\\nvar $;\\nfunction j(t, e, ...n) {\\n\\tlet r = W(this), o = 0, c, i;\\n\\tswitch ((Object(e) !== e || r.isSignal(e)) && (e = { textContent: e }), !0) {\\n\\t\\tcase typeof t == \\\"function\\\": {\\n\\t\\t\\to = 1, m.push({ scope: t, host: (...v) => v.length ? (o === 1 ? n.unshift(...v) : v.forEach((l) => l(i)), void 0) : i }), c = t(e || void 0);\\n\\t\\t\\tlet a = c instanceof d.F;\\n\\t\\t\\tif (c.nodeName === \\\"#comment\\\")\\n\\t\\t\\t\\tbreak;\\n\\t\\t\\tlet h = j.mark({\\n\\t\\t\\t\\ttype: \\\"component\\\",\\n\\t\\t\\t\\tname: t.name,\\n\\t\\t\\t\\thost: a ? \\\"this\\\" : \\\"parentElement\\\"\\n\\t\\t\\t});\\n\\t\\t\\tc.prepend(h), a && (i = h);\\n\\t\\t\\tbreak;\\n\\t\\t}\\n\\t\\tcase t === \\\"#text\\\":\\n\\t\\t\\tc = P.call(this, d.D.createTextNode(\\\"\\\"), e);\\n\\t\\t\\tbreak;\\n\\t\\tcase (t === \\\"<>\\\" || !t):\\n\\t\\t\\tc = P.call(this, d.D.createDocumentFragment(), e);\\n\\t\\t\\tbreak;\\n\\t\\tcase !!$:\\n\\t\\t\\tc = P.call(this, d.D.createElementNS($, t), e);\\n\\t\\t\\tbreak;\\n\\t\\tcase !c:\\n\\t\\t\\tc = P.call(this, d.D.createElement(t), e);\\n\\t}\\n\\treturn ht(c), i || (i = c), n.forEach((a) => a(i)), o && m.pop(), o = 2, c;\\n}\\nfunction Wt(t, e = t, n = void 0) {\\n\\tlet r = Symbol.for(\\\"default\\\"), o = Array.from(e.querySelectorAll(\\\"slot\\\")).reduce((i, a) => Reflect.set(i, a.name || r, a) && i, {}), c = T(o, r);\\n\\tif (t.append = new Proxy(t.append, {\\n\\t\\tapply(i, a, h) {\\n\\t\\t\\tif (!h.length)\\n\\t\\t\\t\\treturn t;\\n\\t\\t\\tlet v = d.D.createDocumentFragment();\\n\\t\\t\\tfor (let l of h) {\\n\\t\\t\\t\\tif (!l || !l.slot) {\\n\\t\\t\\t\\t\\tc && v.appendChild(l);\\n\\t\\t\\t\\t\\tcontinue;\\n\\t\\t\\t\\t}\\n\\t\\t\\t\\tlet x = l.slot, y = o[x];\\n\\t\\t\\t\\tvt(l, \\\"remove\\\", \\\"slot\\\"), y && (bt(y, l, n), Reflect.deleteProperty(o, x));\\n\\t\\t\\t}\\n\\t\\t\\treturn c && (o[r].replaceWith(v), Reflect.deleteProperty(o, r)), t.append = i, t;\\n\\t\\t}\\n\\t}), t !== e) {\\n\\t\\tlet i = Array.from(t.childNodes);\\n\\t\\ti.forEach((a) => a.remove()), t.append(...i);\\n\\t}\\n\\treturn e;\\n}\\nfunction bt(t, e, n) {\\n\\tn && n(t, e);\\n\\ttry {\\n\\t\\tt.replaceWith(P(e, { className: [e.className, t.className], dataset: { ...t.dataset } }));\\n\\t} catch {\\n\\t\\tt.replaceWith(e);\\n\\t}\\n}\\nj.mark = function(t, e = !1) {\\n\\tt = Object.entries(t).map(([o, c]) => o + `=\\\"${c}\\\"`).join(\\\" \\\");\\n\\tlet n = e ? \\\"\\\" : \\\"/\\\", r = d.D.createComment(`<dde:mark ${t}${d.ssr}${n}>`);\\n\\treturn e && (r.end = d.D.createComment(\\\"</dde:mark>\\\")), r;\\n};\\nfunction qt(t) {\\n\\tlet e = this;\\n\\treturn function(...r) {\\n\\t\\t$ = t;\\n\\t\\tlet o = j.call(e, ...r);\\n\\t\\treturn $ = void 0, o;\\n\\t};\\n}\\nvar U = /* @__PURE__ */ new WeakMap(), { setDeleteAttr: tt } = d;\\nfunction P(t, ...e) {\\n\\tif (!e.length)\\n\\t\\treturn t;\\n\\tU.set(t, rt(t, this));\\n\\tfor (let [n, r] of Object.entries(Object.assign({}, ...e)))\\n\\t\\tnt.call(this, t, n, r);\\n\\treturn U.delete(t), t;\\n}\\nfunction nt(t, e, n) {\\n\\tlet { setRemoveAttr: r, s: o } = rt(t, this), c = this;\\n\\tn = o.processReactiveAttribute(\\n\\t\\tt,\\n\\t\\te,\\n\\t\\tn,\\n\\t\\t(a, h) => nt.call(c, t, a, h)\\n\\t);\\n\\tlet [i] = e;\\n\\tif (i === \\\"=\\\")\\n\\t\\treturn r(e.slice(1), n);\\n\\tif (i === \\\".\\\")\\n\\t\\treturn et(t, e.slice(1), n);\\n\\tif (/(aria|data)([A-Z])/.test(e))\\n\\t\\treturn e = e.replace(/([a-z])([A-Z])/g, \\\"$1-$2\\\").toLowerCase(), r(e, n);\\n\\tswitch (e === \\\"className\\\" && (e = \\\"class\\\"), e) {\\n\\t\\tcase \\\"xlink:href\\\":\\n\\t\\t\\treturn r(e, n, \\\"http://www.w3.org/1999/xlink\\\");\\n\\t\\tcase \\\"textContent\\\":\\n\\t\\t\\treturn tt(t, e, n);\\n\\t\\tcase \\\"style\\\":\\n\\t\\t\\tif (typeof n != \\\"object\\\")\\n\\t\\t\\t\\tbreak;\\n\\t\\tcase \\\"dataset\\\":\\n\\t\\t\\treturn I(o, n, et.bind(null, t[e]));\\n\\t\\tcase \\\"ariaset\\\":\\n\\t\\t\\treturn I(o, n, (a, h) => r(\\\"aria-\\\" + a, h));\\n\\t\\tcase \\\"classList\\\":\\n\\t\\t\\treturn gt.call(c, t, n);\\n\\t}\\n\\treturn Et(t, e) ? tt(t, e, n) : r(e, n);\\n}\\nfunction rt(t, e) {\\n\\tif (U.has(t))\\n\\t\\treturn U.get(t);\\n\\tlet r = (t instanceof d.S ? xt : mt).bind(null, t, \\\"Attribute\\\"), o = W(e);\\n\\treturn { setRemoveAttr: r, s: o };\\n}\\nfunction gt(t, e) {\\n\\tlet n = W(this);\\n\\treturn I(\\n\\t\\tn,\\n\\t\\te,\\n\\t\\t(r, o) => t.classList.toggle(r, o === -1 ? void 0 : !!o)\\n\\t), t;\\n}\\nfunction Ft(t) {\\n\\treturn Array.from(t.children).forEach((e) => e.remove()), t;\\n}\\nfunction vt(t, e, n, r) {\\n\\treturn t instanceof d.H ? t[e + \\\"Attribute\\\"](n, r) : t[e + \\\"AttributeNS\\\"](null, n, r);\\n}\\nfunction Et(t, e) {\\n\\tif (!(e in t))\\n\\t\\treturn !1;\\n\\tlet n = ot(t, e);\\n\\treturn !S(n.set);\\n}\\nfunction ot(t, e) {\\n\\tif (t = Object.getPrototypeOf(t), !t)\\n\\t\\treturn {};\\n\\tlet n = Object.getOwnPropertyDescriptor(t, e);\\n\\treturn n || ot(t, e);\\n}\\nfunction I(t, e, n) {\\n\\tif (!(typeof e != \\\"object\\\" || e === null))\\n\\t\\treturn Object.entries(e).forEach(function([o, c]) {\\n\\t\\t\\to && (c = t.processReactiveAttribute(e, o, c, n), n(o, c));\\n\\t\\t});\\n}\\nfunction ct(t) {\\n\\treturn Array.isArray(t) ? t.filter(Boolean).join(\\\" \\\") : t;\\n}\\nfunction mt(t, e, n, r) {\\n\\treturn t[(S(r) ? \\\"remove\\\" : \\\"set\\\") + e](n, ct(r));\\n}\\nfunction xt(t, e, n, r, o = null) {\\n\\treturn t[(S(r) ? \\\"remove\\\" : \\\"set\\\") + e + \\\"NS\\\"](o, n, ct(r));\\n}\\nfunction et(t, e, n) {\\n\\tif (Reflect.set(t, e, n), !!S(n))\\n\\t\\treturn Reflect.deleteProperty(t, e);\\n}\\n\\n// src/events-observer.js\\nvar D = d.M ? wt() : new Proxy({}, {\\n\\tget() {\\n\\t\\treturn () => {\\n\\t\\t};\\n\\t}\\n});\\nfunction wt() {\\n\\tlet t = /* @__PURE__ */ new Map(), e = !1, n = (s) => function(u) {\\n\\t\\tfor (let f of u)\\n\\t\\t\\tif (f.type === \\\"childList\\\") {\\n\\t\\t\\t\\tif (l(f.addedNodes, !0)) {\\n\\t\\t\\t\\t\\ts();\\n\\t\\t\\t\\t\\tcontinue;\\n\\t\\t\\t\\t}\\n\\t\\t\\t\\tx(f.removedNodes, !0) && s();\\n\\t\\t\\t}\\n\\t}, r = new d.M(n(a));\\n\\treturn {\\n\\t\\tobserve(s) {\\n\\t\\t\\tlet u = new d.M(n(() => {\\n\\t\\t\\t}));\\n\\t\\t\\treturn u.observe(s, { childList: !0, subtree: !0 }), () => u.disconnect();\\n\\t\\t},\\n\\t\\tonConnected(s, u) {\\n\\t\\t\\ti();\\n\\t\\t\\tlet f = c(s);\\n\\t\\t\\tf.connected.has(u) || (f.connected.add(u), f.length_c += 1);\\n\\t\\t},\\n\\t\\toffConnected(s, u) {\\n\\t\\t\\tif (!t.has(s))\\n\\t\\t\\t\\treturn;\\n\\t\\t\\tlet f = t.get(s);\\n\\t\\t\\tf.connected.has(u) && (f.connected.delete(u), f.length_c -= 1, o(s, f));\\n\\t\\t},\\n\\t\\tonDisconnected(s, u) {\\n\\t\\t\\ti();\\n\\t\\t\\tlet f = c(s);\\n\\t\\t\\tf.disconnected.has(u) || (f.disconnected.add(u), f.length_d += 1);\\n\\t\\t},\\n\\t\\toffDisconnected(s, u) {\\n\\t\\t\\tif (!t.has(s))\\n\\t\\t\\t\\treturn;\\n\\t\\t\\tlet f = t.get(s);\\n\\t\\t\\tf.disconnected.has(u) && (f.disconnected.delete(u), f.length_d -= 1, o(s, f));\\n\\t\\t}\\n\\t};\\n\\tfunction o(s, u) {\\n\\t\\tu.length_c || u.length_d || (t.delete(s), a());\\n\\t}\\n\\tfunction c(s) {\\n\\t\\tif (t.has(s))\\n\\t\\t\\treturn t.get(s);\\n\\t\\tlet u = {\\n\\t\\t\\tconnected: /* @__PURE__ */ new WeakSet(),\\n\\t\\t\\tlength_c: 0,\\n\\t\\t\\tdisconnected: /* @__PURE__ */ new WeakSet(),\\n\\t\\t\\tlength_d: 0\\n\\t\\t};\\n\\t\\treturn t.set(s, u), u;\\n\\t}\\n\\tfunction i() {\\n\\t\\te || (e = !0, r.observe(d.D.body, { childList: !0, subtree: !0 }));\\n\\t}\\n\\tfunction a() {\\n\\t\\t!e || t.size || (e = !1, r.disconnect());\\n\\t}\\n\\tfunction h() {\\n\\t\\treturn new Promise(function(s) {\\n\\t\\t\\t(requestIdleCallback || requestAnimationFrame)(s);\\n\\t\\t});\\n\\t}\\n\\tasync function v(s) {\\n\\t\\tt.size > 30 && await h();\\n\\t\\tlet u = [];\\n\\t\\tif (!(s instanceof Node))\\n\\t\\t\\treturn u;\\n\\t\\tfor (let f of t.keys())\\n\\t\\t\\tf === s || !(f instanceof Node) || s.contains(f) && u.push(f);\\n\\t\\treturn u;\\n\\t}\\n\\tfunction l(s, u) {\\n\\t\\tlet f = !1;\\n\\t\\tfor (let b of s) {\\n\\t\\t\\tif (u && v(b).then(l), !t.has(b))\\n\\t\\t\\t\\tcontinue;\\n\\t\\t\\tlet N = t.get(b);\\n\\t\\t\\tN.length_c && (b.dispatchEvent(new Event(_)), N.connected = /* @__PURE__ */ new WeakSet(), N.length_c = 0, N.length_d || t.delete(b), f = !0);\\n\\t\\t}\\n\\t\\treturn f;\\n\\t}\\n\\tfunction x(s, u) {\\n\\t\\tlet f = !1;\\n\\t\\tfor (let b of s)\\n\\t\\t\\tu && v(b).then(x), !(!t.has(b) || !t.get(b).length_d) && ((globalThis.queueMicrotask || setTimeout)(y(b)), f = !0);\\n\\t\\treturn f;\\n\\t}\\n\\tfunction y(s) {\\n\\t\\treturn () => {\\n\\t\\t\\ts.isConnected || (s.dispatchEvent(new Event(O)), t.delete(s));\\n\\t\\t};\\n\\t}\\n}\\n\\n// src/customElement.js\\nfunction Zt(t, e, n, r = _t) {\\n\\tm.push({\\n\\t\\tscope: t,\\n\\t\\thost: (...i) => i.length ? i.forEach((a) => a(t)) : t\\n\\t}), typeof r == \\\"function\\\" && (r = r.call(t, t));\\n\\tlet o = t[C];\\n\\to || yt(t);\\n\\tlet c = n.call(t, r);\\n\\treturn o || t.dispatchEvent(new Event(_)), e.nodeType === 11 && typeof e.mode == \\\"string\\\" && t.addEventListener(O, D.observe(e), { once: !0 }), m.pop(), e.append(c);\\n}\\nfunction yt(t) {\\n\\treturn J(t.prototype, \\\"connectedCallback\\\", function(e, n, r) {\\n\\t\\te.apply(n, r), n.dispatchEvent(new Event(_));\\n\\t}), J(t.prototype, \\\"disconnectedCallback\\\", function(e, n, r) {\\n\\t\\te.apply(n, r), (globalThis.queueMicrotask || setTimeout)(\\n\\t\\t\\t() => !n.isConnected && n.dispatchEvent(new Event(O))\\n\\t\\t);\\n\\t}), J(t.prototype, \\\"attributeChangedCallback\\\", function(e, n, r) {\\n\\t\\tlet [o, , c] = r;\\n\\t\\tn.dispatchEvent(new CustomEvent(M, {\\n\\t\\t\\tdetail: [o, c]\\n\\t\\t})), e.apply(n, r);\\n\\t}), t.prototype[C] = !0, t;\\n}\\nfunction J(t, e, n) {\\n\\tt[e] = new Proxy(t[e] || (() => {\\n\\t}), { apply: n });\\n}\\nfunction _t(t) {\\n\\treturn F(t, (e, n) => e.getAttribute(n));\\n}\\n\\n// src/events.js\\nfunction Qt(t, e, n) {\\n\\treturn e || (e = {}), function(o, ...c) {\\n\\t\\tn && (c.unshift(o), o = typeof n == \\\"function\\\" ? n() : n);\\n\\t\\tlet i = c.length ? new CustomEvent(t, Object.assign({ detail: c[0] }, e)) : new Event(t, e);\\n\\t\\treturn o.dispatchEvent(i);\\n\\t};\\n}\\nfunction w(t, e, n) {\\n\\treturn function(o) {\\n\\t\\treturn o.addEventListener(t, e, n), o;\\n\\t};\\n}\\nvar it = (t) => Object.assign({}, typeof t == \\\"object\\\" ? t : null, { once: !0 });\\nw.connected = function(t, e) {\\n\\treturn e = it(e), function(r) {\\n\\t\\treturn r.addEventListener(_, t, e), r[C] ? r : r.isConnected ? (r.dispatchEvent(new Event(_)), r) : (q(e.signal, () => D.offConnected(r, t)) && D.onConnected(r, t), r);\\n\\t};\\n};\\nw.disconnected = function(t, e) {\\n\\treturn e = it(e), function(r) {\\n\\t\\treturn r.addEventListener(O, t, e), r[C] || q(e.signal, () => D.offDisconnected(r, t)) && D.onDisconnected(r, t), r;\\n\\t};\\n};\\nvar Z = /* @__PURE__ */ new WeakMap();\\nw.disconnectedAsAbort = function(t) {\\n\\tif (Z.has(t))\\n\\t\\treturn Z.get(t);\\n\\tlet e = new AbortController();\\n\\treturn Z.set(t, e), t(w.disconnected(() => e.abort())), e;\\n};\\nvar At = /* @__PURE__ */ new WeakSet();\\nw.attributeChanged = function(t, e) {\\n\\treturn typeof e != \\\"object\\\" && (e = {}), function(r) {\\n\\t\\tif (r.addEventListener(M, t, e), r[C] || At.has(r) || !d.M)\\n\\t\\t\\treturn r;\\n\\t\\tlet o = new d.M(function(i) {\\n\\t\\t\\tfor (let { attributeName: a, target: h } of i)\\n\\t\\t\\t\\th.dispatchEvent(\\n\\t\\t\\t\\t\\tnew CustomEvent(M, { detail: [a, h.getAttribute(a)] })\\n\\t\\t\\t\\t);\\n\\t\\t});\\n\\t\\treturn q(e.signal, () => o.disconnect()) && o.observe(r, { attributes: !0 }), r;\\n\\t};\\n};\\n\\n// src/signals-lib.js\\nvar p = \\\"__dde_signal\\\";\\nfunction z(t) {\\n\\ttry {\\n\\t\\treturn T(t, p);\\n\\t} catch {\\n\\t\\treturn !1;\\n\\t}\\n}\\nvar H = [], g = /* @__PURE__ */ new WeakMap();\\nfunction E(t, e) {\\n\\tif (typeof t != \\\"function\\\")\\n\\t\\treturn st(!1, t, e);\\n\\tif (z(t))\\n\\t\\treturn t;\\n\\tlet n = st(!0), r = function() {\\n\\t\\tlet [o, ...c] = g.get(r);\\n\\t\\tif (g.set(r, /* @__PURE__ */ new Set([o])), H.push(r), dt(n, t()), H.pop(), !c.length)\\n\\t\\t\\treturn;\\n\\t\\tlet i = g.get(r);\\n\\t\\tfor (let a of c)\\n\\t\\t\\ti.has(a) || L(a, r);\\n\\t};\\n\\treturn g.set(n[p], r), g.set(r, /* @__PURE__ */ new Set([n])), r(), n;\\n}\\nE.action = function(t, e, ...n) {\\n\\tlet r = t[p], { actions: o } = r;\\n\\tif (!o || !(e in o))\\n\\t\\tthrow new Error(`'${t}' has no action with name '${e}'!`);\\n\\tif (o[e].apply(r, n), r.skip)\\n\\t\\treturn delete r.skip;\\n\\tr.listeners.forEach((c) => c(r.value));\\n};\\nE.on = function t(e, n, r = {}) {\\n\\tlet { signal: o } = r;\\n\\tif (!(o && o.aborted)) {\\n\\t\\tif (Array.isArray(e))\\n\\t\\t\\treturn e.forEach((c) => t(c, n, r));\\n\\t\\tQ(e, n), o && o.addEventListener(\\\"abort\\\", () => L(e, n));\\n\\t}\\n};\\nE.symbols = {\\n\\t//signal: mark,\\n\\tonclear: Symbol.for(\\\"Signal.onclear\\\")\\n};\\nE.clear = function(...t) {\\n\\tfor (let n of t) {\\n\\t\\tlet r = n[p];\\n\\t\\tr && (delete n.toJSON, r.onclear.forEach((o) => o.call(r)), e(n, r), delete n[p]);\\n\\t}\\n\\tfunction e(n, r) {\\n\\t\\tr.listeners.forEach((o) => {\\n\\t\\t\\tif (r.listeners.delete(o), !g.has(o))\\n\\t\\t\\t\\treturn;\\n\\t\\t\\tlet c = g.get(o);\\n\\t\\t\\tc.delete(n), !(c.size > 1) && (n.clear(...c), g.delete(o));\\n\\t\\t});\\n\\t}\\n};\\nvar R = \\\"__dde_reactive\\\";\\nE.el = function(t, e) {\\n\\tlet n = j.mark({ type: \\\"reactive\\\" }, !0), r = n.end, o = d.D.createDocumentFragment();\\n\\to.append(n, r);\\n\\tlet { current: c } = m, i = {}, a = (h) => {\\n\\t\\tif (!n.parentNode || !r.parentNode)\\n\\t\\t\\treturn L(t, a);\\n\\t\\tlet v = i;\\n\\t\\ti = {}, m.push(c);\\n\\t\\tlet l = e(h, function(u, f) {\\n\\t\\t\\tlet b;\\n\\t\\t\\treturn T(v, u) ? (b = v[u], delete v[u]) : b = f(), i[u] = b, b;\\n\\t\\t});\\n\\t\\tm.pop(), Array.isArray(l) || (l = [l]);\\n\\t\\tlet x = document.createComment(\\\"\\\");\\n\\t\\tl.push(x), n.after(...l);\\n\\t\\tlet y;\\n\\t\\tfor (; (y = x.nextSibling) && y !== r; )\\n\\t\\t\\ty.remove();\\n\\t\\tx.remove(), n.isConnected && St(c.host());\\n\\t};\\n\\treturn Q(t, a), ft(t, a, n, e), a(t()), o;\\n};\\nfunction St(t) {\\n\\t!t || !t[R] || (requestIdleCallback || setTimeout)(function() {\\n\\t\\tt[R] = t[R].filter(([e, n]) => n.isConnected ? !0 : (L(...e), !1));\\n\\t});\\n}\\nvar Ct = {\\n\\t_set(t) {\\n\\t\\tthis.value = t;\\n\\t}\\n};\\nfunction Ot(t) {\\n\\treturn function(e, n) {\\n\\t\\tlet r = (...c) => c.length ? e.setAttribute(n, ...c) : K(r), o = at(r, e.getAttribute(n), Ct);\\n\\t\\treturn t[n] = o, o;\\n\\t};\\n}\\nvar G = \\\"__dde_attributes\\\";\\nE.observedAttributes = function(t) {\\n\\tlet e = t[G] = {}, n = F(t, Ot(e));\\n\\treturn w.attributeChanged(function({ detail: o }) {\\n\\t\\t/*! This maps attributes to signals (`S.observedAttributes`).\\n\\t\\t\\t* Investigate `__dde_attributes` key of the element.*/\\n\\t\\tlet [c, i] = o, a = this[G][c];\\n\\t\\tif (a)\\n\\t\\t\\treturn E.action(a, \\\"_set\\\", i);\\n\\t})(t), w.disconnected(function() {\\n\\t\\t/*! This removes all signals mapped to attributes (`S.observedAttributes`).\\n\\t\\t\\t* Investigate `__dde_attributes` key of the element.*/\\n\\t\\tE.clear(...Object.values(this[G]));\\n\\t})(t), n;\\n};\\nvar ut = {\\n\\tisSignal: z,\\n\\tprocessReactiveAttribute(t, e, n, r) {\\n\\t\\tif (!z(n))\\n\\t\\t\\treturn n;\\n\\t\\tlet o = (c) => {\\n\\t\\t\\tif (!t.isConnected)\\n\\t\\t\\t\\treturn L(n, o);\\n\\t\\t\\tr(e, c);\\n\\t\\t};\\n\\t\\treturn Q(n, o), ft(n, o, t, e), n();\\n\\t}\\n};\\nfunction ft(t, e, ...n) {\\n\\tlet { current: r } = m;\\n\\tr.prevent || r.host(function(o) {\\n\\t\\to[R] || (o[R] = [], w.disconnected(\\n\\t\\t\\t() => (\\n\\t\\t\\t\\t/*!\\n\\t\\t\\t\\t* Clears all Signals listeners added in the current scope/host (`S.el`, `assign`, …?).\\n\\t\\t\\t\\t* You can investigate the `__dde_reactive` key of the element.\\n\\t\\t\\t\\t* */\\n\\t\\t\\t\\to[R].forEach(([[c, i]]) => L(c, i, c[p] && c[p].host && c[p].host() === o))\\n\\t\\t\\t)\\n\\t\\t)(o)), o[R].push([[t, e], ...n]);\\n\\t});\\n}\\nfunction st(t, e, n) {\\n\\tlet r = t ? () => K(r) : (...o) => o.length ? dt(r, ...o) : K(r);\\n\\treturn at(r, e, n, t);\\n}\\nvar Dt = Object.assign(/* @__PURE__ */ Object.create(null), {\\n\\tstopPropagation() {\\n\\t\\tthis.skip = !0;\\n\\t}\\n}), V = class extends Error {\\n\\tconstructor() {\\n\\t\\tsuper();\\n\\t\\tlet [e, ...n] = this.stack.split(`\\n`), r = e.slice(e.indexOf(\\\"@\\\"), e.indexOf(\\\".js:\\\") + 4);\\n\\t\\tthis.stack = n.find((o) => !o.includes(r));\\n\\t}\\n};\\nfunction at(t, e, n, r = !1) {\\n\\tlet o = [];\\n\\tX(n) !== \\\"[object Object]\\\" && (n = {});\\n\\tlet { onclear: c } = E.symbols;\\n\\tn[c] && (o.push(n[c]), delete n[c]);\\n\\tlet { host: i } = m;\\n\\treturn Reflect.defineProperty(t, p, {\\n\\t\\tvalue: {\\n\\t\\t\\tvalue: e,\\n\\t\\t\\tactions: n,\\n\\t\\t\\tonclear: o,\\n\\t\\t\\thost: i,\\n\\t\\t\\tlisteners: /* @__PURE__ */ new Set(),\\n\\t\\t\\tdefined: new V().stack,\\n\\t\\t\\treadonly: r\\n\\t\\t},\\n\\t\\tenumerable: !1,\\n\\t\\twritable: !1,\\n\\t\\tconfigurable: !0\\n\\t}), t.toJSON = () => t(), t.valueOf = () => t[p] && t[p].value, Object.setPrototypeOf(t[p], Dt), t;\\n}\\nfunction Rt() {\\n\\treturn H[H.length - 1];\\n}\\nfunction K(t) {\\n\\tif (!t[p])\\n\\t\\treturn;\\n\\tlet { value: e, listeners: n } = t[p], r = Rt();\\n\\treturn r && n.add(r), g.has(r) && g.get(r).add(t), e;\\n}\\nfunction dt(t, e, n) {\\n\\tif (!t[p])\\n\\t\\treturn;\\n\\tlet r = t[p];\\n\\tif (!(!n && r.value === e))\\n\\t\\treturn r.value = e, r.listeners.forEach((o) => o(e)), e;\\n}\\nfunction Q(t, e) {\\n\\tif (t[p])\\n\\t\\treturn t[p].listeners.add(e);\\n}\\nfunction L(t, e, n) {\\n\\tlet r = t[p];\\n\\tif (!r)\\n\\t\\treturn;\\n\\tlet o = r.listeners.delete(e);\\n\\tif (n && !r.listeners.size) {\\n\\t\\tif (E.clear(t), !g.has(r))\\n\\t\\t\\treturn o;\\n\\t\\tlet c = g.get(r);\\n\\t\\tif (!g.has(c))\\n\\t\\t\\treturn o;\\n\\t\\tg.get(c).forEach((i) => L(i, c, !0));\\n\\t}\\n\\treturn o;\\n}\\n\\n// signals.js\\nB(ut);\\nexport {\\n\\tE as S,\\n\\tP as assign,\\n\\tnt as assignAttribute,\\n\\tht as chainableAppend,\\n\\tgt as classListDeclarative,\\n\\tj as createElement,\\n\\tqt as createElementNS,\\n\\tZt as customElementRender,\\n\\tyt as customElementWithDDE,\\n\\tQt as dispatchEvent,\\n\\tj as el,\\n\\tqt as elNS,\\n\\tvt as elementAttribute,\\n\\tFt as empty,\\n\\tz as isSignal,\\n\\tyt as lifecyclesToEvents,\\n\\t_t as observedAttributes,\\n\\tw as on,\\n\\tB as registerReactivity,\\n\\tm as scope,\\n\\tE as signal,\\n\\tWt as simulateSlots\\n};\\n\"}],\"toolbar\":false}"));</script><div class="notice"><!--<dde:mark type="component" name="mnemonic" host="parentElement" ssr/>--><h3 id="h-mnemonic"><!--<dde:mark type="component" name="h3" host="parentElement" ssr/>--><a href="#h-mnemonic" tabindex="-1">#</a> Mnemonic</h3><ul><li><code>customElementRender(&lt;custom-element&gt;, &lt;connect-target&gt;, &lt;render-function&gt;[, &lt;properties&gt;])</code> — use function to render DOM structure for given &lt;custom-element&gt;</li><li><code>customElementWithDDE(&lt;custom-element&gt;)</code> — register &lt;custom-element&gt; to DDE library, see also `lifecyclesToEvents`, can be also used as decorator</li><li><code>observedAttributes(&lt;custom-element&gt;)</code> — returns record of observed attributes (keys uses camelCase)</li><li><code>S.observedAttributes(&lt;custom-element&gt;)</code> — returns record of observed attributes (keys uses camelCase and values are signals)</li><li><code>lifecyclesToEvents(&lt;class-declaration&gt;)</code> — convert lifecycle methods to events, can be also used as decorator</li></ul></div><div class="prevNext"><!--<dde:mark type="component" name="prevNext" host="parentElement" ssr/>--><a rel="prev" href="p05-scopes" title="Organizing UI into components"><!--<dde:mark type="component" name="pageLink" host="parentElement" ssr/>-->Scopes and components (previous)</a><!--<dde:mark type="component" name="pageLink" host="this" ssr/>--></div></main></body></html>
\ No newline at end of file
diff --git a/docs_src/components/examples/customElement/observedAttributes.js b/docs_src/components/examples/customElement/observedAttributes.js
new file mode 100644
index 0000000..2b76280
--- /dev/null
+++ b/docs_src/components/examples/customElement/observedAttributes.js
@@ -0,0 +1,42 @@
+import {
+	customElementRender,
+	customElementWithDDE,
+	observedAttributes,
+	el, on, scope 
+} from "deka-dom-el";
+import { S } from "deka-dom-el/signals";
+export class HTMLCustomElement extends HTMLElement{
+	static tagName= "custom-element";
+	static observedAttributes= [ "attr" ];
+	connectedCallback(){
+		console.log(observedAttributes(this));
+		customElementRender(
+			this,
+			this.attachShadow({ mode: "open" }),
+			ddeComponent,
+			S.observedAttributes
+		);
+	}
+	set attr(value){ this.setAttribute("attr", value); }
+	get attr(){ return this.getAttribute("attr"); }
+}
+
+/** @param {{ attr: ddeSignal<string, {}> }} props */
+function ddeComponent({ attr }){
+	scope.host(
+		on.connected(e=> console.log(e.target.outerHTML)),
+	);
+	return el().append(
+		el("p", S(()=> `Hello from Custom Element with attribute '${attr()}'`))
+	);
+}
+customElementWithDDE(HTMLCustomElement);
+customElements.define(HTMLCustomElement.tagName, HTMLCustomElement);
+
+document.body.append(
+	el(HTMLCustomElement.tagName, { attr: "Attribute" })
+);
+setTimeout(
+	()=> document.querySelector(HTMLCustomElement.tagName).setAttribute("attr", "New Value"),
+	3*750
+);
diff --git a/docs_src/p06-customElement.html.js b/docs_src/p06-customElement.html.js
index c6caadd..0e0d830 100644
--- a/docs_src/p06-customElement.html.js
+++ b/docs_src/p06-customElement.html.js
@@ -81,6 +81,7 @@ export function page({ pkg, info }){
 			and ${el("code", "observedAttributes")} (converts attributes to render function arguments —
 			${el("em", "default")}) or ${el("code", "S.observedAttributes")} (converts attributes to signals).
 		`),
+		el(example, { src: fileURL("./components/examples/customElement/observedAttributes.js"), page_id }),
 
 
 		el(mnemonic)
diff --git a/index.d.ts b/index.d.ts
index af12b5e..60c07db 100644
--- a/index.d.ts
+++ b/index.d.ts
@@ -177,12 +177,12 @@ export const scope: {
 
 export function customElementRender<
 	EL extends HTMLElement,
-	P extends any = Record<string, any>
+	P extends any = Record<string, string | ddeSignal<string>>
 >(
 	custom_element: EL,
 	target: ShadowRoot | EL,
 	render: (props: P)=> SupportedElement | DocumentFragment,
-	props?: P | ((...args: any[])=> P)
+	props?: P | ((el: EL)=> P)
 ): EL
 export function customElementWithDDE<EL extends (new ()=> HTMLElement)>(custom_element: EL): EL
 export function lifecyclesToEvents<EL extends (new ()=> HTMLElement)>(custom_element: EL): EL
diff --git a/signals.d.ts b/signals.d.ts
index 517f83b..ebae316 100644
--- a/signals.d.ts
+++ b/signals.d.ts
@@ -55,7 +55,7 @@ interface signal{
 	 * */
 	el<S extends any>(signal: Signal<S, any>, el: (v: S)=> Element | Element[] | DocumentFragment): DocumentFragment;
 
-    observedAttributes(custom_element: HTMLElement): Record<string, Signal<any, any>>;
+    observedAttributes(custom_element: HTMLElement): Record<string, Signal<string, {}>>;
 }
 export const signal: signal;
 export const S: signal;