Class Component<T>

An HTMLElement component.

To create your own HTML component, it's recommended to extend this class.

Type Parameters

T extends HTMLElement = HTMLElement
Component element type

Hierarchy (View Summary)

ElementComponent<T>
- Component

Index

Constructors

constructor

Properties

node

Constructors

constructor

new Component<T extends HTMLElement = HTMLElement>(
element: T | ElementToTagName<T>,
): Component<T>
Create Component instance
Type Parameters
- T extends HTMLElement = HTMLElement
Parameters
- element: T | ElementToTagName<T>
  Instance or tag name
Returns Component<T>
Overrides ElementComponent.constructor
- Defined in Component.ts:38

Properties

`Readonly`node

node: T

This component's node

Methods

after

after(...components: NodeComponent<any>[]): Component<T>
Insert components in the children list of this ElementComponent’s parent, just after this ElementComponent.
Parameters
- ...components: NodeComponent<any>[]
  Components to insert
Returns Component<T>
Inherited from ElementComponent.after
- Defined in ElementComponent.ts:74

append

append(...components: NodeComponent<any>[]): Component<T>
Insert component after the last child
Parameters
- ...components: NodeComponent<any>[]
Returns Component<T>
Inherited from ElementComponent.append
- Defined in NodeComponent.ts:48

attr

attr(name: string, value?: string): Component<T>
Set attribute
Parameters
- name: string
  attribute name
- Optionalvalue: string
  attribute value
Returns Component<T>
Inherited from ElementComponent.attr
- Defined in ElementComponent.ts:134

before

before(...components: NodeComponent<any>[]): Component<T>
Insert components in the children list of this ElementComponent’s parent, just before this ElementComponent.
Parameters
- ...components: NodeComponent<any>[]
  Components to insert
Returns Component<T>
Inherited from ElementComponent.before
- Defined in ElementComponent.ts:65

boundingClientRect

boundingClientRect(): DOMRect
Get a DOMRect object providing information about the size of a component and its position relative to the viewport.

Returns DOMRect
See
Element: getBoundingClientRect() - MDN
Inherited from ElementComponent.boundingClientRect
- Defined in ElementComponent.ts:197

class

class(...classes: string[]): Component<T>
Add classes
Parameters
- ...classes: string[]
Returns Component<T>
Inherited from ElementComponent.class
- Defined in ElementComponent.ts:83

clone

clone(deep?: boolean): Component<T>
Clone this component. Event listeners are not cloned.
Parameters
- deep: boolean = true
  Whether to clone the whole subtree.
Returns Component<T>
A duplicate of this component.

See
Node: cloneNode() - MDN
Overrides ElementComponent.clone
- Defined in Component.ts:147

closest

closest<T extends HTMLElement = HTMLElement>(
...selectors: string[],
): null | Component<T>
Traverse the component and its parents (heading toward the document root) until it finds a component that matches the specified CSS selector.
Type Parameters
- T extends HTMLElement = HTMLElement
  Component element type
Parameters
- ...selectors: string[]
Returns null | Component<T>
- Defined in Component.ts:86

context

context(fn: (this: this, component: this) => any): this
Run a function in the context of this component
Parameters
- fn: (this: this, component: this) => any
  Provides this component as the first argument and this.
Returns this
Inherited from ElementComponent.context
- Defined in NodeComponent.ts:40

css

css(name: string, value: string): Component<T>
Set style property
Parameters
- name: string
  Property name
- value: string
  Property value
Returns Component<T>
- Defined in Component.ts:116
css(name: string, value: string, priority: boolean): Component<T>
Set style property
Parameters
- name: string
  Property name
- value: string
  Property value
- priority: boolean
  Whether to make this rule !important
Returns Component<T>
- Defined in Component.ts:124
css(properties: Record<string, string>): Component<T>
Set style properties
Parameters
- properties: Record<string, string>
  Object of style property name and value pairs
Returns Component<T>
- Defined in Component.ts:130

empty

empty(): Component<T>
Empty the component (remove children)

Returns Component<T>
Inherited from ElementComponent.empty
- Defined in ElementComponent.ts:216

focus

focus(options?: FocusOptions): Component<T>
Puts the element into focus.
Parameters
- Optionaloptions: FocusOptions
  An optional object for controlling aspects of the focusing process.
Returns Component<T>
- Defined in Component.ts:106

get

get<K extends string | number | symbol>(name: K): T[K]
Get element property
Type Parameters
- K extends string | number | symbol
Parameters
- name: K
  property name
Returns T[K]
Inherited from ElementComponent.get
- Defined in ElementComponent.ts:180

hasClass

hasClass(...classes: string[]): boolean
Check if component has class
Parameters
- ...classes: string[]
Returns boolean
true if component has all the specified classes
Inherited from ElementComponent.hasClass
- Defined in ElementComponent.ts:125

html

html(strings: TemplateStringsArray, ...components: any[]): this
Append HTML.

Any components (provided as ${...} inside the HTML string literal) remain fully functional and are appended (not just as HTML).
Parameters
- strings: TemplateStringsArray
- ...components: any[]
Returns this
Example
```
component.html`<div>${new Component("button")
     .text("Click me")
     .on("click", () => console.log("clicked"))
}</div>`
// Event listeners etc. are preserved.
// Note the lack of parentheses.
```
See
Template literals (Template strings) - MDN
Inherited from ElementComponent.html
- Defined in ElementComponent.ts:162

is

is(...selectors: string[]): boolean
Test whether the element would be selected by the specified CSS selector, or group of CSS selectors.
Parameters
- ...selectors: string[]
Returns boolean
- Defined in Component.ts:97

isVisible

isVisible(): boolean
Check whether the component is visible.

Returns boolean
See
Element: checkVisibility() - MDN
Inherited from ElementComponent.isVisible
- Defined in ElementComponent.ts:188

on

on<K extends keyof HTMLElementEventMap>(
type: K,
listener: (ev: HTMLElementEventMap[K], component: this) => any,
): Component<T>
Add event listener
Type Parameters
- K extends keyof HTMLElementEventMap
Parameters
- type: K
  A case-sensitive string representing the event type to listen for.
- listener: (ev: HTMLElementEventMap[K], component: this) => any
  The function that is called when an event of the specified type occurs.
Returns Component<T>
Overrides ElementComponent.on
- Defined in Component.ts:151
on<K extends keyof HTMLElementEventMap>(
    type: K,
    listener: (ev: HTMLElementEventMap[K], component: this) => any,
    options: AddEventListenerOptions,
): Component<T>
Add event listener
Type Parameters
- K extends keyof HTMLElementEventMap
Parameters
- type: K
  A case-sensitive string representing the event type to listen for.
- listener: (ev: HTMLElementEventMap[K], component: this) => any
  The function that is called when an event of the specified type occurs.
- options: AddEventListenerOptions
  An object that specifies characteristics about the event listener. See options on MDN
Returns Component<T>
Overrides ElementComponent.on
- Defined in Component.ts:152
on<K extends keyof HTMLElementEventMap>(
    type: K,
    listener: (ev: HTMLElementEventMap[K], component: this) => any,
    useCapture: boolean,
): Component<T>
Add event listener
Type Parameters
- K extends keyof HTMLElementEventMap
Parameters
- type: K
  A case-sensitive string representing the event type to listen for.
- listener: (ev: HTMLElementEventMap[K], component: this) => any
  The function that is called when an event of the specified type occurs.
- useCapture: boolean
  See useCapture on MDN
Returns Component<T>
Overrides ElementComponent.on
- Defined in Component.ts:153

prepend

prepend(...components: NodeComponent<any>[]): Component<T>
Insert component before the first child
Parameters
- ...components: NodeComponent<any>[]
Returns Component<T>
Inherited from ElementComponent.prepend
- Defined in ElementComponent.ts:56

remove

remove(): this
Remove the element

Returns this
Inherited from ElementComponent.remove
- Defined in ElementComponent.ts:204

removeAttr

removeAttr(name: string): Component<T>
Remove attribute
Parameters
- name: string
  attribute name
Returns Component<T>
Inherited from ElementComponent.removeAttr
- Defined in ElementComponent.ts:143

removeClass

removeClass(...classes: string[]): Component<T>
Remove classes
Parameters
- ...classes: string[]
Returns Component<T>
Inherited from ElementComponent.removeClass
- Defined in ElementComponent.ts:91

replaceClass

replaceClass(
oldClasses: string | string[],
newClasses: string | string[],
): Component<T>
Replace classes
Parameters
- oldClasses: string | string[]
  If all of these classes are present, they will be removed.
- newClasses: string | string[]
  The classes to add if all oldClasses are present
Returns Component<T>
Inherited from ElementComponent.replaceClass
- Defined in ElementComponent.ts:111

select

select<T extends HTMLElement = HTMLElement>(
...selectors: string[],
): null | Component<T>
Get the first component child that matches the specified CSS selector, or group of CSS selectors. If no matches are found, null is returned.
Type Parameters
- T extends HTMLElement = HTMLElement
  Component element type
Parameters
- ...selectors: string[]
Returns null | Component<T>
- Defined in Component.ts:63

selectAll

selectAll<T extends HTMLElement = HTMLElement>(
...selectors: string[],
): Component<T>[]
Get all child components that match the specified CSS selector, or group of CSS selectors.
Type Parameters
- T extends HTMLElement = HTMLElement
  Component element type
Parameters
- ...selectors: string[]
Returns Component<T>[]
- Defined in Component.ts:76

set

set<K extends string | number | symbol>(name: K, value: T[K]): Component<T>
Set element property
Type Parameters
- K extends string | number | symbol
Parameters
- name: K
  property name
- value: T[K]
  property value
Returns Component<T>
Inherited from ElementComponent.set
- Defined in ElementComponent.ts:171

slot

slot(slot: string, parent?: ParentNode): Component<T>
Render this component in the place of a <slot name="…"></slot>.
Parameters
- slot: string
  The slot name
- Optionalparent: ParentNode = document
  The parent element within to search for slots. Defaults to document
Returns Component<T>
Throws
DOMException When the slot is not found
Inherited from ElementComponent.slot
- Defined in NodeComponent.ts:100

text

text(text: string): Component<T>
Set text content
Parameters
- text: string
Returns Component<T>
Inherited from ElementComponent.text
- Defined in NodeComponent.ts:56

toggleClass

toggleClass(...classes: string[]): Component<T>
Toggle classes
Parameters
- ...classes: string[]
Returns Component<T>
Inherited from ElementComponent.toggleClass
- Defined in ElementComponent.ts:99

toString

toString(): string
Get this component's outer HTML

Returns string
Inherited from ElementComponent.toString
- Defined in ElementComponent.ts:224

`Static`from

from<T extends HTMLElement = HTMLElement>(html: HtmlTagString<T>): Component<T>
Create component from HTML code.

Note: only the first child of the HTML code will be used.
Type Parameters
- T extends HTMLElement = HTMLElement
Parameters
- html: HtmlTagString<T>
Returns Component<T>
- Defined in Component.ts:51

Class Component<T>

Type Parameters

Hierarchy (View Summary)

Index

Constructors

Properties

Methods

Constructors

constructor

Type Parameters

Parameters

Returns Component<T>

Properties

Readonlynode

Methods

after

Parameters

Returns Component<T>

append

Parameters

Returns Component<T>

attr

Parameters

Returns Component<T>

before

Parameters

Returns Component<T>

boundingClientRect

Returns DOMRect

See

class

Parameters

Returns Component<T>

clone

Parameters

Returns Component<T>

See

closest

Type Parameters

Parameters

Returns null | Component<T>

context

Parameters

Returns this

css

Parameters

Returns Component<T>

Parameters

Returns Component<T>

Parameters

Returns Component<T>

empty

Returns Component<T>

focus

Parameters

Returns Component<T>

get

Type Parameters

Parameters

Returns T[K]

hasClass

Parameters

Returns boolean

html

Parameters

Returns this

Example

See

is

Parameters

Returns boolean

isVisible

Returns boolean

See

on

Type Parameters

Parameters

Returns Component<T>

Type Parameters

Parameters

`Readonly`node

`Static`from