amateras 0.1.0 → 0.2.0

package/ext/router/node/Router.ts

@@ -0,0 +1,104 @@
+import { _Array_from, _instanceof, _Object_fromEntries } from "#lib/native";
+import { Page } from "./Page";
+import { BaseRouteNode, Route } from "./Route";
+
+const _location = location;
+const {origin} = _location;
+const _history = history;
+const toURL = (path: string | URL) => 
+    _instanceof(path, URL) ? path : new URL(path.startsWith(origin) ? path : origin + path);
+const [PUSH, REPLACE] = [1, 2] as const;
+const historyHandler = (path: string | URL | Nullish, mode: 1 | 2) => {
+    if (!path) return;
+    const url = toURL(path);
+    if (url.origin !== origin) return this;
+    history[mode === PUSH ? 'pushState' : 'replaceState']({}, '' , url)
+    Router.routers.forEach(router => router.routes.size && router.resolve(path));
+}
+export class Router extends BaseRouteNode<''> {
+    static pageRouters = new Map<Page, Router>();
+    static routers = new Set<Router>();
+    pageMap = new Map<string, Page>();
+    constructor(page?: Page) {
+        super('', () => [], 'router')
+        Router.routers.add(this);
+        if (page) Router.pageRouters.set(page, this);
+    }
+
+    static open(path: string | URL | Nullish) {
+        historyHandler(path, PUSH);
+        return this;
+    }
+
+    static back() {
+        _history.back();
+        return this;
+    }
+
+    static forward() {
+        _history.forward();
+        return this;
+    }
+
+    static replace(path: string | URL | Nullish) {
+        historyHandler(path, REPLACE);
+        return this;
+    }
+
+    async resolve(path: string | URL) {
+        const {pathname, searchParams, hash} = toURL(path);
+        const routeData = { params: {} as {[key: string]: string}, query: _Object_fromEntries(searchParams) }
+        const split = (p: string) => p.replaceAll(/\/+/g, '/').split('/').map(path => `/${path}`);
+
+        function determineRoute(parentRoute: BaseRouteNode<any>, path: string, hash: string | undefined): [route: Route | null, pathId: string][] {
+            const targetPathSplit = split(path);
+            hash && targetPathSplit.push(hash);
+            if (!parentRoute.routes.size) return [];
+            routeLoop: for (const route of _Array_from(parentRoute.routes.values()).sort((a, b) => b.path.length - a.path.length)) {
+                const routePathSplit = split(route.path);
+                let pathId = '';
+                splitLoop: for (let i = 0; i < routePathSplit.length; i++) {
+                    const pass = () => pathId += targetSnippet;
+                    const [routeSnippet, targetSnippet] = [routePathSplit[i], targetPathSplit[i]];
+                    if (!routeSnippet || !targetSnippet) continue routeLoop;
+                    // process params in path
+                    if (routeSnippet.includes(':')) {
+                        if (targetSnippet === '/') continue routeLoop;
+                        const [prefix, paramName] = routeSnippet.split(':') as [string, string];
+                        if (!targetSnippet.startsWith(prefix)) continue routeLoop;
+                        routeData.params[paramName] = targetSnippet.replace(`${prefix}`, '');
+                        pass();
+                        continue splitLoop;
+                    }
+                    if (routeSnippet === '/' && route.routes.size) continue splitLoop;
+                    if (routeSnippet !== targetSnippet) continue routeLoop;
+                    pass()
+                }
+                return [[route, pathId], ...determineRoute(route, path, hash)];
+            }
+            return [[null, parentRoute.path + '$$NOT_FOUND$$']];
+        }
+        // analytics
+        const targetRoutes = determineRoute(this, pathname + '/', hash);
+        // build pages
+        let prevPage: null | Page = null, prevRoute: BaseRouteNode<any> = this;
+        for (const [route, pathId] of targetRoutes) {
+            const page = await (this.pageMap.get(pathId) ?? (route ? route.build(routeData) : prevRoute.routes.get('404')?.build(routeData) ?? new Route('404', () => null).build()));
+            const _document = document;
+            _document && (_document.title = page.pageTitle() ?? _document.title);
+            this.pageMap.set(pathId, page);
+            if (prevPage) Router.pageRouters.get(prevPage)?.content(page);
+            else this.content(page);
+            prevPage = page;
+            if (route) prevRoute = route;
+        }
+        return this;
+    }
+
+    listen() {
+        const resolve = () => this.resolve(_location.href)
+        addEventListener('popstate', resolve);
+        resolve();
+        return this;
+    }
+}

package/ext/router/node/RouterAnchor.ts

@@ -0,0 +1,8 @@
+import { $Anchor } from "#html/$Anchor";
+
+export class RouterAnchor extends $Anchor {
+    constructor() {
+        super();
+        this.on('click', e => { e.preventDefault(); $.open(this.href()) })
+    }
+}

package/ext/ssr/env.ts

@@ -0,0 +1,61 @@
+import { NODE } from "esm-env";
+import { _Array_from, _Object_assign, _Object_entries, isNull } from "../../src/lib/native";
+import type { $Node } from "../../src/node/$Node";
+
+if (NODE) {
+    //@ts-expect-error
+    global.window = undefined;
+    //@ts-expect-error
+    global.document = undefined;
+    //@ts-expect-error
+    global.Node = class Node {
+        nodeName: string;
+        attributes = {};
+        childNodes = new Set<Node>();
+        parent?: Node;
+        $!: $Node;
+        constructor(nodeName: string) {
+            this.nodeName = nodeName.toUpperCase();
+        }
+        get textContent() { return _Array_from(this.childNodes.values()).map(node => node.textContent).join() }
+        set textContent(content: string | null) { 
+            this.childNodes.clear();
+            content && this.childNodes.add(new Text(content) as unknown as Node);
+        }
+        appendChild(node: Node) {
+            if (this.childNodes.has(node)) this.childNodes.delete(node);
+            this.childNodes.add(node);
+            node.parent = this;
+        }
+        addEventListener(type: string, cb: () => void) { }
+        setAttribute(key: string, value: string) { _Object_assign(this.attributes, {[key]: value}) }
+        remove() {
+            this.parent?.removeChild(this);
+        }
+        removeChild(node: Node) {
+            this.childNodes.delete(node);
+        }
+
+        get outerHTML() {
+            const attr = _Object_entries(this.attributes).map(([key, value]) => `${key}="${value}"`).join(' ');
+            const tagName = this.nodeName.toLowerCase();
+            const IS_VOID_ELEMENT = ['area', 'base', 'br', 'col', 'embed', 'hr', 'img', 'input', 'link', 'meta', 'param', 'source', 'track', 'wbr'].includes(tagName);
+            return `<${tagName}${attr ? ` ${attr}` : ''}>${_Array_from(this.childNodes).map(node => `${node.$}`).join('')}${IS_VOID_ELEMENT && !this.childNodes.size ? '' : `</${tagName}>`}`;
+        }
+    }
+    //@ts-expect-error
+    global.Element = class Element {}
+    //@ts-expect-error
+    global.HTMLElement = class HTMLElement {}
+    //@ts-expect-error
+    global.Text = class Text {
+        textContent: string;
+        $: this;
+        constructor(textContent: string) {
+            this.textContent = textContent;
+            this.$ = this;
+        }
+
+        toString() { return this.textContent }
+    }
+}

package/ext/ssr/index.ts

@@ -0,0 +1,47 @@
+import './env';
+import 'amateras';
+import { _Array_from, _instanceof, _Object_assign, _Object_defineProperty } from "amateras/lib/native";
+import { $Element, $Node, $Text } from "amateras/node";
+import { BROWSER, NODE } from 'esm-env';
+
+declare module 'amateras/core' {
+    export namespace $ {
+        export function mount(id: string, $node: $Element): void;
+        export function serverSide(cb: () => any): void;
+    }
+}
+
+export function onserver<T>(cb: () => T): T | '' {
+    if (NODE) return cb();
+    return '';
+}
+
+export function onclient<T>(cb: () => T): T | undefined {
+    if (BROWSER) return cb();
+    return;
+}
+
+_Object_assign($, {
+    mount(id: string, $node: $Element) {
+        if (!BROWSER) return;
+        const node = document.querySelector(`#${id}`);
+        if (!node) throw 'Target node of mounting not found';
+        getData(node, $node);
+        node.replaceWith($node.node);
+    
+        function getData(node: Node, $node: $Node) {
+            if (node.nodeName === 'SIGNAL' && _instanceof(node, Element) && _instanceof($node, $Text)) {
+                const type = $(node).attr()['type'];
+                return $node.signals.forEach(signal => signal.value(type === 'number' ? Number(node.textContent) : type === 'boolean' ? node.textContent == 'true' ? true : false : node.textContent));
+            }
+            if (_instanceof(node, Text)) return $node.textContent(node.textContent);
+            if (_instanceof(node, Element) && _instanceof($node, $Element)) $node.attr($(node).attr());
+            const arr = _Array_from($node.childNodes);
+            node.childNodes.forEach((_node, i) => {
+                const targetChildNode = arr.at(i);
+                if (!targetChildNode) throw 'Target DOM tree not matched';
+                getData(_node, targetChildNode.$)
+            })
+        }
+    }
+})

package/ext/ssr/package.json

@@ -0,0 +1,10 @@
+{
+    "name": "@amateras/ssr",
+    "peerDependencies": {
+        "amateras": "../../",
+        "esm-env": "^1.2.2"
+    },
+    "imports": {
+        "#structure/*": "./src/structure/*.ts"
+    }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "amateras",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "Amateras is a DOM Utility library.",
   "module": "index.ts",
   "type": "module",
@@ -20,8 +20,7 @@
     "#lib/*": "./src/lib/*.ts",
     "#structure/*": "./src/structure/*.ts",
     "#html": "./ext/html/html.ts",
-    "#css": "./ext/css/css.ts",
-    "#css/*": "./ext/css/*.ts"
+    "#html/*": "./ext/html/node/*.ts"
   },
   "exports": {
     ".": "./src/index.ts",
@@ -31,7 +30,10 @@
     "./lib/*": "./src/lib/*.ts",
     "./structure/*": "./src/structure/*.ts",
     "./html": "./ext/html/html.ts",
-    "./css": "./ext/css/src/index.ts"
+    "./html/*": "./ext/html/node/*.ts",
+    "./css": "./ext/css/src/index.ts",
+    "./router": "./ext/router/index.ts",
+    "./ssr": "./ext/ssr/index.ts"
   },
   "workspaces": [
     "./ext/*"

package/src/core.ts

@@ -1,22 +1,26 @@
 import './global';
 import { Signal } from "#structure/Signal";
-import { $Element } from "#node/$Element";
+import { $Element, type $Event } from "#node/$Element";
 import { $Node, type $NodeContentTypes } from '#node/$Node';
 import '#node/node';
-import { _instanceof, _Object_defineProperty, _Object_entries, isFunction, isObject, isString, isUndefined } from '#lib/native';
+import { _instanceof, isString, isFunction, _Object_assign, isObject, isNull, _Object_entries, _Object_defineProperty } from '#lib/native';
+import type { $HTMLElement } from '#node/$HTMLElement';
 
-const tagNameMap: {[key: string]: Constructor<$Node>} = {}
-export function $<K extends (...args: any[]) => $Node>(fn: K, ...args: Parameters<K>): ReturnType<K>;
-export function $<K extends $NodeContentTypes | undefined | void, F extends () => K, P extends Parameters<F>>(fn: F, ...args: any[]): K;
-export function $<K extends $Node, T extends Constructor<K>, P extends ConstructorParameters<T>>(construct: T, ...args: P): K;
+const nodeNameMap: {[key: string]: Constructor<$Node>} = {}
+
+export function $<F extends (...args: any[]) => $Node>(fn: F, ...args: Parameters<F>): ReturnType<F>;
+export function $<C extends $NodeContentTypes | undefined | void, F extends () => C, P extends Parameters<F>>(fn: F, ...args: any[]): C;
+export function $<N extends $Node, T extends Constructor<N>, P extends ConstructorParameters<T>>(construct: T, ...args: P): N;
+export function $<N extends $Node>($node: N, ...args: any[]): N;
+export function $<E extends Element>(element: E, ...args: any[]): $Element<E>;
 export function $<K extends TemplateStringsArray>(string: K, ...values: any[]): $NodeContentTypes[];
-export function $<K extends $Node>($node: K): K;
-export function $<K extends Element>(element: K): $Element<K>;
-export function $<K extends keyof HTMLElementTagNameMap>(tagname: K): $Element<HTMLElementTagNameMap[K]>
-export function $(tagname: string): $Element<HTMLElement>
-export function $(resolver: string | HTMLElement | $Node | Function | TemplateStringsArray, ...args: any[]) {
+export function $<K extends keyof HTMLElementTagNameMap>(tagname: K): $HTMLElement<HTMLElementTagNameMap[K]>;
+export function $<H extends HTMLElement>(tagname: $Event<H>): $HTMLElement<H>;
+export function $<E extends Element>(tagname: $Event<E>): $Element<E>;
+export function $(tagname: string): $HTMLElement<HTMLElement>
+export function $(resolver: string | Element | $Node | Function | TemplateStringsArray | Event, ...args: any[]) {
     if (_instanceof(resolver, $Node)) return resolver;
-    if (isString(resolver) && tagNameMap[resolver]) return new tagNameMap[resolver]();
+    if (isString(resolver) && nodeNameMap[resolver]) return new nodeNameMap[resolver](...args);
     if (isFunction(resolver)) 
         if (resolver.prototype?.constructor) return resolver.prototype.constructor(...args); 
         else return resolver(...args);
@@ -25,22 +29,24 @@ export function $(resolver: string | HTMLElement | $Node | Function | TemplateSt
         return resolver.map(str => [str ?? undefined, iterate.next().value]).flat().filter(item => item);
     }
     if (_instanceof(resolver, Node) && _instanceof(resolver.$, $Node)) return resolver.$;
+    if (_instanceof(resolver, Event)) return $(resolver.currentTarget as Element)
     return new $Element(resolver);
 }
 
 export namespace $ {
+    export const stylesheet = new CSSStyleSheet();
+    document?.adoptedStyleSheets.push(stylesheet);
     type SignalProcess<T> = T extends Array<any> ? {} : T extends object ? { [key in keyof T as `${string & key}$`]: SignalFunction<T[key]> } : {};
-    export type SignalFunction<T> = ({(value: ((newValue: T) => T) | T): SignalFunction<T>, (): T}) & { signal: Signal<T> } & SignalProcess<T>;
+    export type SignalFunction<T> = {signal: Signal<T>, set: (newValue: T | ((oldValue: T) => T)) => SignalFunction<T>} & (() => T) & SignalProcess<T>;
     export function signal<T>(value: T): SignalFunction<T>
     export function signal<T>(value: T) {
         const signal = new Signal<T>(value);
-        const signalFn = function (newValue?: T) {
-            if (!arguments.length) return signal.value();
-            if (!isUndefined(newValue)) signal.value(newValue);
-            return signalFn;
-        }
-        _Object_defineProperty(signalFn, 'signal', { value: signal });
-        if (isObject(value)) {
+        const signalFn = function () { return signal.value(); }
+        _Object_assign(signalFn, {
+            signal,
+            set(newValue: T) { return signal.value(newValue), signalFn; }
+        })
+        if (isObject(value) && !isNull(value)) {
             for (const [key, val] of _Object_entries(value)) {
                 const val$ = $.signal(val);
                 val$.signal.subscribe(newValue => { value[key as keyof typeof value] = newValue; signal.emit() });
@@ -55,12 +61,12 @@ export namespace $ {
         let subscribed = false;
         const signalFn: SignalFunction<any> = $.signal(null);
         function computeFn() {
-            if (!subscribed) return signalFn(subscribe())();
-            else return signalFn(process())();
+            if (!subscribed) return signalFn.set(subscribe())();
+            else return signalFn.set(process())();
         }
         function subscribe () {
             const signalHandler = (signal: Signal<any>) => { 
-                signal.subscribe(() => signalFn(process())) 
+                signal.subscribe(() => signalFn.set(process())) 
             }
             Signal.listeners.add(signalHandler);
             const result = process();
@@ -72,14 +78,21 @@ export namespace $ {
         return computeFn as ComputeFunction<T>
     }
 
-    export function registerTagName(tagname: string, $node: Constructor<$Node>) {
-        tagNameMap[tagname] = $node;
+    export function assign(resolver: [nodeName: string, $node: Constructor<$Node>][]): void;
+    export function assign(nodeName: string, $node: Constructor<$Node>): void;
+    export function assign(resolver: string | [nodeName: string, $node: Constructor<$Node>][], $node?: Constructor<$Node>) {
+        if (isString(resolver)) $node && (nodeNameMap[resolver] = $node);
+        else resolver.forEach(([nodeName, $node]) => nodeNameMap[nodeName] = $node);
         return $;
     }
 
     export function orArrayResolver<T>(item: OrArray<T>): T[] {
         return _instanceof(item, Array) ? item : [item];
     }
+
+    export function span(content: string) {
+        return $('span').content(content);
+    }
 }
 export type $ = typeof $;
 globalThis.$ = $;

package/src/global.ts

@@ -1,6 +1,7 @@
 import type { $Element } from '#node/$Element';
 import type { $Node } from '#node/$Node';
 import * as core from '#core';
+import type { Signal } from '#structure/Signal';
 
 declare global {
     export import $ = core.$;
@@ -10,6 +11,7 @@ declare global {
     type OrPromise<T> = T | Promise<T>;
     type OrNullish<T> = T | Nullish;
     type Constructor<T> = { new (...args: any[]): T }
+    type $Parameter<T> = T | undefined | Signal<T> | Signal<T | undefined>
     type Prettify<T> = {
         [K in keyof T]: T[K];
     } & {};

package/src/lib/assignHelper.ts

@@ -2,18 +2,16 @@ import type { $Node } from "#node/$Node";
 import { assign } from "./assign";
 import { _Object_entries, _Object_getOwnPropertyDescriptors } from "./native";
 
-export function assignHelper(targets: [object: Constructor<Node>, target: Constructor<$Node>, tagname?: string][]) {
-    for (const [object, target, tagname] of targets) {
-        const {set, get, fn} = { set: [] as string[], get: [] as string[], fn: [] as string[] }
-        // assign native object properties to target
-        for (const [prop, value] of _Object_entries(_Object_getOwnPropertyDescriptors(object.prototype))) {
-            if (prop in target.prototype) continue;
-            if (value.get && !value.set) get.push(prop);
-            else if (value.value) fn.push(prop);
-            else if (value.get && value.set) set.push(prop);
-        }
-        assign(target, {set, get, fn})
-        // register tagname
-        if (tagname) $.registerTagName(tagname, target)
+export function assignHelper(object: Constructor<Node>, target: Constructor<$Node>, tagname?: string) {
+    const {set, get, fn} = { set: [] as string[], get: [] as string[], fn: [] as string[] }
+    // assign native object properties to target
+    for (const [prop, value] of _Object_entries(_Object_getOwnPropertyDescriptors(object.prototype))) {
+        if (prop in target.prototype) continue;
+        if (value.get && !value.set) get.push(prop);
+        else if (value.value) fn.push(prop);
+        else if (value.get && value.set) set.push(prop);
     }
+    assign(target, {set, get, fn})
+    // register tagname
+    if (tagname) $.assign(tagname, target)
 }

package/src/node/$Element.ts

@@ -1,22 +1,23 @@
 import { Signal } from "#structure/Signal";
 import { $Node } from "#node/$Node";
-import { _Array_from, _instanceof, _Object_entries, _Object_fromEntries, isUndefined } from "#lib/native";
+import { _Array_from, _instanceof, _Object_assign, _Object_entries, _Object_fromEntries, isFunction, isString, isUndefined } from "#lib/native";
 
 export class $Element<Ele extends Element = Element> extends $Node {
-    listeners = new Map<Function, (event: Event) => void>;
     declare node: Ele
     constructor(resolver: Ele | string) {
-        super(_instanceof(resolver, Element) ? resolver : document.createElement(resolver) as unknown as Ele)
+        super(_instanceof(resolver, Element) ? resolver : createNode(resolver) as unknown as Ele)
         //@ts-expect-error
         this.node.$ = this;
     }
 
     attr(): {[key: string]: string};
+    attr(key: string): string | null;
     attr(obj: {[key: string]: string | number | boolean | Signal<any>}): this;
-    attr(obj?: {[key: string]: string | number | boolean | Signal<any>}) {
+    attr(resolver?: {[key: string]: string | number | boolean | Signal<any>} | string) {
         if (!arguments.length) return _Object_fromEntries(_Array_from(this.node.attributes).map(attr => [attr.name, attr.value]));
-        if (obj) for (let [key, value] of _Object_entries(obj)) {
-            const set = (value: any) => isUndefined(value) && this.node.setAttribute(key, `${value}`)
+        if (isString(resolver)) return this.node.getAttribute(resolver);
+        if (resolver) for (let [key, value] of _Object_entries(resolver)) {
+            const set = (value: any) => !isUndefined(value) && this.node.setAttribute(key, `${value}`)
             if (_instanceof(value, Signal)) value = value.subscribe(set).value();
             set(value);
         }
@@ -43,18 +44,94 @@ export class $Element<Ele extends Element = Element> extends $Node {
         return this;
     }
 
-    on<K extends keyof HTMLElementEventMap>(type: K, listener: ($node: this, event: Event) => void, options?: boolean | AddEventListenerOptions) {
-        const handler = (event: Event) => listener(this, event);
-        this.listeners.set(listener, handler);
-        this.node.addEventListener(type, handler, options);
+    on<K extends keyof HTMLElementEventMap>(type: K, listener: $EventListener<Ele> | $EventListenerObject<Ele>, options?: boolean | AddEventListenerOptions) {
+        this.node.addEventListener(type, listener as EventListener, options);
         return this;
     }
 
-    off<K extends keyof HTMLElementEventMap>(type: K, listener: ($node: this, event: Event) => void, options?: boolean | EventListenerOptions) {
-        const handler = this.listeners.get(listener);
-        if (handler) this.node.removeEventListener(type, handler, options);
-        this.listeners.delete(listener);
+    off<K extends keyof HTMLElementEventMap>(type: K, listener: $EventListener<Ele> | $EventListenerObject<Ele>, options?: boolean | EventListenerOptions) {
+        this.node.removeEventListener(type, listener as EventListener, options);
         return this;
     }
-    once() {}
+    
+    once<K extends keyof HTMLElementEventMap>(type: K, listener: $EventListener<Ele> | $EventListenerObject<Ele>, options?: boolean | AddEventListenerOptions) {
+        const handler = (event: Event) => {
+            this.off(type, handler, options);
+            isFunction(listener) ? listener(event as any) : listener.handleEvent(event as any);
+        }
+        this.on(type, handler, options);
+        return this;
+    }
+
+    toString() {
+        return this.node.outerHTML;
+    }
+}
+
+export type $Event<E extends Element> = Event & {target: E};
+export type $EventListener<E extends Element> = (event: $Event<E>) => void;
+export type $EventListenerObject<E extends Element> = { handleEvent(object: $Event<E>): void; }
+
+function createNode(nodeName: string) {
+    //@ts-expect-error
+    return !document ? new Node(nodeName) as unknown as Node & ChildNode : document.createElement(nodeName);
+}
+
+export interface $Element<Ele extends Element> {
+    /** {@link Element.attributes} */
+    readonly attributes: NamedNodeMap;
+    /** {@link Element.clientHeight} */
+    readonly clientHeight: number;
+    /** {@link Element.clientLeft} */
+    readonly clientLeft: number;
+    /** {@link Element.clientTop} */
+    readonly clientTop: number;
+    /** {@link Element.clientWidth} */
+    readonly clientWidth: number;
+    /** {@link Element.currentCSSZoom} */
+    readonly currentCSSZoom: number;
+    /** {@link Element.localName} */
+    readonly localName: string;
+    /** {@link Element.namespaceURI} */
+    readonly namespaceURI: string | null;
+    /** {@link Element.prefix} */
+    readonly prefix: string | null;
+    /** {@link Element.ownerDocument} */
+    readonly ownerDocument: Document;
+    /** {@link Element.scrollHeight} */
+    readonly scrollHeight: number;
+    /** {@link Element.scrollWidth} */
+    readonly scrollWidth: number;
+    /** {@link Element.shadowRoot} */
+    readonly shadowRoot: ShadowRoot | null;
+    /** {@link Element.tagName} */
+    readonly tagName: string;
+
+    /** {@link Element.classList} */
+    classList(): DOMTokenList;
+    classList(value: $Parameter<string>): this;
+    /** {@link Element.className} */
+    className(): string;
+    className(value: $Parameter<string>): this;
+    /** {@link Element.id} */
+    id(): string;
+    id(id: $Parameter<string>): this;
+    /** {@link Element.innerHTML} */
+    innerHTML(): string;
+    innerHTML(innerHTML: $Parameter<string>): this;
+    /** {@link Element.outerHTML} */
+    outerHTML(): string;
+    outerHTML(outerHTML: $Parameter<string>): this;
+    /** {@link Element.part} */
+    part(): DOMTokenList;
+    part(part: $Parameter<string>): this;
+    /** {@link Element.scrollLeft} */
+    scrollLeft(): number;
+    scrollLeft(scrollLeft: $Parameter<number>): this;
+    /** {@link Element.scrollTop} */
+    scrollTop(): number;
+    scrollTop(scrollTop: $Parameter<number>): this;
+    /** {@link Element.slot} */
+    slot(): string;
+    slot(slot: $Parameter<string>): this;
 }