npm - jj - Versions diffs - 0.1.1 → 2.0.0 - Mend

jj 0.1.1 → 2.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (89) hide show

package/LICENSE ADDED Viewed

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+Copyright (c) 2026 Alex Ewerlöf
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

package/README.md CHANGED Viewed

@@ -1,20 +1,45 @@
 # Just JavaScript!
+**Do you know what runs faster than VDOM? No VDOM!**
 **JJ** A human readable WYWIWIR (what you write is what is run) DSL for creating and manipulating HTML and CSS for modern browsers.
-> Do you know what is faster than VDOM? No VDOM!
+Modern browsers are very powerful out of the box and get you pretty far without having to "compile" (transpile) an interpreted language (`.jsx`, `.vue`, etc.) to an earlier version of it (ES5). This is a proof of concept to show how far we can go without having to compile the code.
+## Install
-Modern browsers are pretty awesome out of the box and get you pretty far without having to "compile" (transpile) an interpreted language (JavaScript) to an earlier version of it (ES5). This is a proof of concept to show how far we can go without having to compile the code.
+```bash
+npm i jj
+```
+# Usage
+CDN:
+```js
+import { nextAnimationFrame, on } from 'https://unpkg.com/browse/jj/dist/bundle.js'
+```
+From NPM:
+```js
+import { nextAnimationFrame, on } from 'jj'
+```
 ## Design principals
-* Modern: take full advantage of ever-green browser features. No support for legacy browsers
-* Sugar but not magic: it'll let you write shorter code but it won't do much logic behind the scene
-* Excplicit: make the code more readable and easier to follow
-* Basic: use plain old javascript objects (POJOs) for describing HTML and CSS
+- Modern: take full advantage of ever-green browser features. No support for legacy browsers
+- Sugar but not magic: it'll let you write shorter code but it won't do much logic behind the scene
+- Excplicit: make the code more readable and easier to follow
+- Basic: use plain old javascript objects (POJOs) for describing HTML and CSS
 # Install
+One of the main points of using this library is to avoid compiling your code.
+You can directly import it from UNPKG at https://unpkg.com/browse/jj/dist/jj.js
+But if you prefer to install it via NPM:
 ```
 npm i jj
 ```
@@ -30,7 +55,10 @@ npm i jj
 ```
 ```javascript
+// If you installed via NPM
 import { ready, html } from '/node_modules/jj/dist/jj.js'
+// Is you want to directly use it via UNPKG
+import { ready, html } from 'https://unpkg.com/browse/jj/dist/jj.js'
 ready(() => {
     html.div('Hello world!').appendToBody()
@@ -45,4 +73,4 @@ _Will be written when we reach a stable API._
 MIT
-_Made in Sweden 🇸🇪 by [@alexewerlof](https://mobile.twitter.com/alexewerlof)_
+_Made in Sweden 🇸🇪 by [@alexewerlof](https://mobile.twitter.com/alexewerlof)_

package/lib/ComponentFiles.d.ts ADDED Viewed

@@ -0,0 +1,35 @@
+import { WF } from './WF.js';
+declare class ComponentFile {
+    protected href: string;
+    constructor(href: string);
+    protected _fetch(mimeSubtype: string): Promise<string>;
+    /**
+     * Creates a <lik re="preload|prefetch"> element and adds it to the document <head> element.
+     * @param as the link "as" attribute. Use 'fetch' for HTML, 'style' for CSS, and 'script' for JavaScript
+     * @param rel when set to a truthy value, a 'preload' link is created. Otherwise a 'prefetch' is created
+     * The difference lies in the priority of loading the resource to the browser cache where preload has higher prio.
+     */
+    protected addLinkPre(as: 'fetch' | 'style', rel: 'prefetch' | 'preload'): this;
+}
+export declare class TemplateFile extends ComponentFile {
+    #private;
+    constructor(href: string);
+    fetch(): Promise<string>;
+    get promise(): Promise<string>;
+    prefetch(): this;
+    preload(): this;
+}
+export declare class StyleFile extends ComponentFile {
+    #private;
+    constructor(href: string);
+    fetch(): Promise<CSSStyleSheet>;
+    get promise(): Promise<CSSStyleSheet>;
+    prefetch(): this;
+    preload(): this;
+}
+export declare class ComponentFiles {
+    #private;
+    constructor(template: TemplateFile, ...styles: StyleFile[]);
+    initShadow(el: HTMLElement, mode: ShadowRootMode): Promise<WF>;
+}
+export {};

package/lib/ComponentFiles.js ADDED Viewed

@@ -0,0 +1,116 @@
+var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
+    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
+};
+var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
+    if (kind === "m") throw new TypeError("Private method is not writable");
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
+    return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
+};
+var _TemplateFile_promise, _StyleFile_promise, _ComponentFiles_template, _ComponentFiles_styles;
+import { isA, isStr } from 'jty';
+import { WF } from './WF.js';
+import { WHE } from './WHE.js';
+class ComponentFile {
+    constructor(href) {
+        this.href = href;
+        if (!isStr(href)) {
+            throw new TypeError(`Expected a string href. Got ${href} (${typeof href})`);
+        }
+    }
+    async _fetch(mimeSubtype) {
+        const response = await fetch(this.href, { headers: { Accept: `text/${mimeSubtype}` } });
+        if (!response.ok) {
+            throw new Error(`GET ${this.href} failed: ${response.status} ${response.statusText}`);
+        }
+        return response.text();
+    }
+    /**
+     * Creates a <lik re="preload|prefetch"> element and adds it to the document <head> element.
+     * @param as the link "as" attribute. Use 'fetch' for HTML, 'style' for CSS, and 'script' for JavaScript
+     * @param rel when set to a truthy value, a 'preload' link is created. Otherwise a 'prefetch' is created
+     * The difference lies in the priority of loading the resource to the browser cache where preload has higher prio.
+     */
+    addLinkPre(as, rel) {
+        const link = WHE.fromTag('link').setAttr('rel', rel).setAttr('href', this.href).setAttr('as', as);
+        document.head.append(link.ref);
+        return this;
+    }
+}
+export class TemplateFile extends ComponentFile {
+    constructor(href) {
+        super(href);
+        _TemplateFile_promise.set(this, void 0);
+    }
+    async fetch() {
+        return await this._fetch('html');
+    }
+    get promise() {
+        if (__classPrivateFieldGet(this, _TemplateFile_promise, "f") === undefined) {
+            __classPrivateFieldSet(this, _TemplateFile_promise, this.fetch(), "f");
+        }
+        return __classPrivateFieldGet(this, _TemplateFile_promise, "f");
+    }
+    prefetch() {
+        return this.addLinkPre('fetch', 'prefetch');
+    }
+    preload() {
+        return this.addLinkPre('fetch', 'preload');
+    }
+}
+_TemplateFile_promise = new WeakMap();
+export class StyleFile extends ComponentFile {
+    constructor(href) {
+        super(href);
+        _StyleFile_promise.set(this, void 0);
+    }
+    async fetch() {
+        const cssString = await this._fetch('css');
+        const sheet = new CSSStyleSheet();
+        return await sheet.replace(`${cssString}\n/*# sourceURL=${this.href} */`);
+    }
+    get promise() {
+        if (__classPrivateFieldGet(this, _StyleFile_promise, "f") === undefined) {
+            __classPrivateFieldSet(this, _StyleFile_promise, this.fetch(), "f");
+        }
+        return __classPrivateFieldGet(this, _StyleFile_promise, "f");
+    }
+    prefetch() {
+        return this.addLinkPre('style', 'prefetch');
+    }
+    preload() {
+        return this.addLinkPre('style', 'preload');
+    }
+}
+_StyleFile_promise = new WeakMap();
+export class ComponentFiles {
+    constructor(template, ...styles) {
+        _ComponentFiles_template.set(this, void 0);
+        _ComponentFiles_styles.set(this, void 0);
+        if (!isA(template, TemplateFile)) {
+            throw new TypeError(`Expected a ${TemplateFile.constructor.name}. Got ${template} (${typeof template})`);
+        }
+        __classPrivateFieldSet(this, _ComponentFiles_template, template, "f");
+        for (const style of styles) {
+            if (!isA(style, StyleFile)) {
+                throw new TypeError(`Expected a ${StyleFile.constructor.name}. Got ${style} (${typeof style})`);
+            }
+        }
+        __classPrivateFieldSet(this, _ComponentFiles_styles, styles, "f");
+    }
+    async initShadow(el, mode) {
+        // Prevent FOUC
+        const [template, ...styleSheets] = await Promise.all([
+            __classPrivateFieldGet(this, _ComponentFiles_template, "f").promise,
+            ...__classPrivateFieldGet(this, _ComponentFiles_styles, "f").map((style) => style.promise),
+        ]);
+        WHE.from(el).setShadow(mode, template, ...styleSheets);
+        if (!el.shadowRoot)
+            throw new Error('Shadow root not created!');
+        return new WF(el.shadowRoot);
+    }
+}
+_ComponentFiles_template = new WeakMap(), _ComponentFiles_styles = new WeakMap();
+//# sourceMappingURL=ComponentFiles.js.map

package/lib/ComponentFiles.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"ComponentFiles.js","sourceRoot":"","sources":["../src/ComponentFiles.ts"],"names":[],"mappings":"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"}

package/lib/WC.d.ts ADDED Viewed

@@ -0,0 +1,33 @@
+export type LoadingStrategy = 'eager' | 'lazy' | 'prefetch' | 'preload';
+interface ComponentResource<T> {
+    get promise(): Promise<T>;
+}
+/**
+ * Parent class for custom components.
+ * It adds a few pragmatic functionalities
+ * - `setTemplate` sets the template for the custom component body
+ * - `addStyle` adds a stylesheet to be used by the shadowRoot
+ * - `connectedCallback` assigns the templates to shadowRoot and attaches any styles
+ * - `attributeChangedCallback` sets any props that corresponds to attributes defined in `static observedAttributes`
+ */
+export declare class WC extends HTMLElement {
+    static jjTemplate?: ComponentResource<string>;
+    static jjStyle?: ComponentResource<CSSStyleSheet>[];
+    static closedShadow?: boolean;
+    static observedAttributes?: string[];
+    static setTemplateFile(href: string, loading?: LoadingStrategy): typeof WC;
+    static setTemplateHtml(html: string): typeof WC;
+    static addStyleFile(href: string, loading?: LoadingStrategy): typeof WC;
+    static addStyleCss(css: string): typeof WC;
+    connectedCallback(): Promise<void>;
+    /**
+     * The class that extends this one should define
+     * `static observedAttributes[]` containing kebab-based attribute names (all lower case)
+     * @param name kebab-case and in lower case exactly as it appears in `observedAttributes`
+     * @param oldValue
+     * @param newValue
+     * @returns true if it tried to set the attribute; otherwise false
+     */
+    attributeChangedCallback(name: string, oldValue: any, newValue: any): boolean;
+}
+export {};

package/lib/WC.js ADDED Viewed

@@ -0,0 +1,160 @@
+var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
+    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
+};
+var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
+    if (kind === "m") throw new TypeError("Private method is not writable");
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
+    return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
+};
+var _ComponentFile_promise;
+import { keb2cam } from './case.js';
+import { WHE } from './WHE.js';
+import { hasProp, isArr, isStr } from 'jty';
+class ComponentFile {
+    constructor(as, href, loading = 'lazy') {
+        this.as = as;
+        this.href = href;
+        _ComponentFile_promise.set(this, void 0);
+        if (!isStr(href)) {
+            throw new TypeError(`Expected a string href. Got ${href} (${typeof href})`);
+        }
+        switch (loading) {
+            case 'eager':
+                this.promise; // Trigger fetch
+                break;
+            case 'prefetch':
+            case 'preload':
+                this.addLinkPre(loading);
+                break;
+            case 'lazy':
+                break;
+            default:
+                throw new RangeError(`Expected a valid loading strategy. Got: ${loading} (${typeof loading})`);
+        }
+    }
+    /**
+     * Creates a <lik re="preload|prefetch"> element and adds it to the document <head> element.
+     * @param as the link "as" attribute. Use 'fetch' for HTML, 'style' for CSS, and 'script' for JavaScript
+     * @param rel when set to a truthy value, a 'preload' link is created. Otherwise a 'prefetch' is created
+     * The difference lies in the priority of loading the resource to the browser cache where preload has higher prio.
+     */
+    addLinkPre(rel) {
+        const link = WHE.fromTag('link').setAttr('rel', rel).setAttr('href', this.href).setAttr('as', this.as);
+        document.head.append(link.ref);
+        return this;
+    }
+    get promise() {
+        if (__classPrivateFieldGet(this, _ComponentFile_promise, "f") === undefined) {
+            __classPrivateFieldSet(this, _ComponentFile_promise, this.fetch(), "f");
+        }
+        return __classPrivateFieldGet(this, _ComponentFile_promise, "f");
+    }
+}
+_ComponentFile_promise = new WeakMap();
+class TemplateFile extends ComponentFile {
+    constructor(href, loading) {
+        super('fetch', href, loading);
+    }
+    async fetch() {
+        const response = await fetch(this.href, { headers: { Accept: 'text/html' } });
+        if (!response.ok) {
+            throw new Error(`GET ${this.href} failed: ${response.status} ${response.statusText}`);
+        }
+        return response.text();
+    }
+}
+class StyleFile extends ComponentFile {
+    constructor(href, loading) {
+        super('style', href, loading);
+    }
+    async fetch() {
+        const response = await fetch(this.href, { headers: { Accept: 'text/css' } });
+        if (!response.ok) {
+            throw new Error(`GET ${this.href} failed: ${response.status} ${response.statusText}`);
+        }
+        const text = await response.text();
+        const sheet = new CSSStyleSheet();
+        return sheet.replace(`${text}\n/*# sourceURL=${this.href} */`);
+    }
+}
+class TemplateStr {
+    constructor(content) {
+        if (!isStr(content)) {
+            throw new TypeError(`Expected a HTML string. Got ${content} (${typeof content})`);
+        }
+        this.promise = Promise.resolve(content);
+    }
+}
+class StyleStr {
+    constructor(css) {
+        if (!isStr(css)) {
+            throw new TypeError(`Expected a CSS string. Got ${css} (${typeof css})`);
+        }
+        const sheet = new CSSStyleSheet();
+        this.promise = sheet.replace(css);
+    }
+}
+/**
+ * Parent class for custom components.
+ * It adds a few pragmatic functionalities
+ * - `setTemplate` sets the template for the custom component body
+ * - `addStyle` adds a stylesheet to be used by the shadowRoot
+ * - `connectedCallback` assigns the templates to shadowRoot and attaches any styles
+ * - `attributeChangedCallback` sets any props that corresponds to attributes defined in `static observedAttributes`
+ */
+export class WC extends HTMLElement {
+    static setTemplateFile(href, loading) {
+        this.jjTemplate = new TemplateFile(href, loading);
+        return this;
+    }
+    static setTemplateHtml(html) {
+        this.jjTemplate = new TemplateStr(html);
+        return this;
+    }
+    static addStyleFile(href, loading) {
+        if (!isArr(this.jjStyle)) {
+            this.jjStyle = [];
+        }
+        this.jjStyle.push(new StyleFile(href, loading));
+        return this;
+    }
+    static addStyleCss(css) {
+        if (!isArr(this.jjStyle)) {
+            this.jjStyle = [];
+        }
+        this.jjStyle.push(new StyleStr(css));
+        return this;
+    }
+    async connectedCallback() {
+        const { jjTemplate: template, jjStyle: style = [], closedShadow } = this.constructor;
+        const [html, ...styleSheets] = await Promise.all([template?.promise, ...style.map((style) => style.promise)]);
+        // Prevent FOUC by assigning the template and CSS in one go
+        WHE.from(this).setShadow(closedShadow ? 'closed' : 'open', html, ...styleSheets);
+    }
+    /**
+     * The class that extends this one should define
+     * `static observedAttributes[]` containing kebab-based attribute names (all lower case)
+     * @param name kebab-case and in lower case exactly as it appears in `observedAttributes`
+     * @param oldValue
+     * @param newValue
+     * @returns true if it tried to set the attribute; otherwise false
+     */
+    attributeChangedCallback(name, oldValue, newValue) {
+        // Called when observed attributes change.
+        if (oldValue !== newValue) {
+            const observedAttributes = this.constructor.observedAttributes;
+            if (isArr(observedAttributes) && observedAttributes.includes(name)) {
+                const kebabName = keb2cam(name);
+                if (hasProp(this, kebabName)) {
+                    this[kebabName] = newValue;
+                    return true;
+                }
+            }
+        }
+        return false;
+    }
+}
+//# sourceMappingURL=WC.js.map

package/lib/WC.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"WC.js","sourceRoot":"","sources":["../src/WC.ts"],"names":[],"mappings":"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"}

package/lib/WDF.d.ts ADDED Viewed

@@ -0,0 +1,11 @@
+import { WN } from './WN.js';
+import { Wrapped } from './WN-mixin.js';
+/**
+ * Wraps a DocumentFragment (which is a descendant of Node)
+ */
+export declare class WDF<T extends DocumentFragment = DocumentFragment> extends WN<T> {
+    static from(ref: DocumentFragment): WDF;
+    constructor(ref: T);
+    byId(id: string, throwIfNotFound?: boolean): Wrapped | null;
+    empty(): this;
+}

package/lib/WDF.js ADDED Viewed

@@ -0,0 +1,31 @@
+import { isA } from 'jty';
+import { WN } from './WN.js';
+/**
+ * Wraps a DocumentFragment (which is a descendant of Node)
+ */
+export class WDF extends WN {
+    static from(ref) {
+        return new WDF(ref);
+    }
+    constructor(ref) {
+        if (!isA(ref, DocumentFragment)) {
+            throw new TypeError(`Expected a DocumentFragment. Got ${ref} (${typeof ref})`);
+        }
+        super(ref);
+    }
+    byId(id, throwIfNotFound = true) {
+        const el = this.ref.getElementById(id);
+        if (el) {
+            return WN.wrap(el);
+        }
+        if (throwIfNotFound) {
+            throw new TypeError(`Element with id ${id} not found`);
+        }
+        return null;
+    }
+    empty() {
+        this.ref.replaceChildren();
+        return this;
+    }
+}
+//# sourceMappingURL=WDF.js.map

package/lib/WDF.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"WDF.js","sourceRoot":"","sources":["../src/WDF.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AACzB,OAAO,EAAE,EAAE,EAAE,MAAM,SAAS,CAAA;AAG5B;;GAEG;AACH,MAAM,OAAO,GAAmD,SAAQ,EAAK;IACzE,MAAM,CAAC,IAAI,CAAC,GAAqB;QAC7B,OAAO,IAAI,GAAG,CAAC,GAAG,CAAC,CAAA;IACvB,CAAC;IAED,YAAY,GAAM;QACd,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,gBAAgB,CAAC,EAAE,CAAC;YAC9B,MAAM,IAAI,SAAS,CAAC,oCAAoC,GAAG,KAAK,OAAO,GAAG,GAAG,CAAC,CAAA;QAClF,CAAC;QACD,KAAK,CAAC,GAAG,CAAC,CAAA;IACd,CAAC;IAED,IAAI,CAAC,EAAU,EAAE,eAAe,GAAG,IAAI;QACnC,MAAM,EAAE,GAAG,IAAI,CAAC,GAAG,CAAC,cAAc,CAAC,EAAE,CAAC,CAAA;QACtC,IAAI,EAAE,EAAE,CAAC;YACL,OAAO,EAAE,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;QACtB,CAAC;QACD,IAAI,eAAe,EAAE,CAAC;YAClB,MAAM,IAAI,SAAS,CAAC,mBAAmB,EAAE,YAAY,CAAC,CAAA;QAC1D,CAAC;QACD,OAAO,IAAI,CAAA;IACf,CAAC;IAED,KAAK;QACD,IAAI,CAAC,GAAG,CAAC,eAAe,EAAE,CAAA;QAC1B,OAAO,IAAI,CAAA;IACf,CAAC;CACJ"}

package/lib/WE.d.ts ADDED Viewed

@@ -0,0 +1,42 @@
+import { WN } from './WN.js';
+import { WSH } from './WSH.js';
+/**
+ * Wraps a DOM Element (which is a descendant of Node)
+ */
+export declare class WE<T extends Element = Element> extends WN<T> {
+    static from(ref: Element): WE;
+    constructor(ref: T);
+    getAttr(name: string): string | null;
+    hasAttr(name: string): boolean;
+    setAttr(name: string, value: string): this;
+    setAttrs(obj: Record<string, string>): this;
+    rmAttr(name: string): this;
+    rmAttrs(...names: string[]): this;
+    getAria(name: string): string | null;
+    hasAria(name: string): boolean;
+    setAria(name: string, value: string): this;
+    rmAria(name: string): this;
+    addClass(...classNames: string[]): this;
+    rmClasses(...classNames: string[]): this;
+    rmClass(className: string): this;
+    hasClass(className: string): boolean;
+    toggleClass(className: string): this;
+    onClick(handler: EventListenerOrEventListenerObject): this;
+    hide(): this;
+    show(): this;
+    disable(): this;
+    enable(): this;
+    getTitle(): string | null;
+    setTitle(title: string): this;
+    setId(id: string): this;
+    getId(): string | null;
+    getHtml(): string;
+    setHtml(html: string): this;
+    /**
+     * @remarks
+     * **Note:** You can't attach a shadow root to every type of element. There are some that can't have a
+     * shadow DOM for security reasons (for example `<a>`).
+     */
+    setShadow(mode?: ShadowRootMode, html?: string, ...styleSheets: CSSStyleSheet[]): this;
+    getShadow(): WSH;
+}