Class ElementComponent<T>`Abstract`

An Element component

Type Parameters

T extends Element
Component element type

Hierarchy (View Summary)

NodeComponent<T>
- ElementComponent
  - Component
  - SvgComponent

Index

Constructors

`Protected`constructor

new ElementComponent<T extends Element>(element: T): ElementComponent<T>
Protected
Type Parameters
- T extends Element
Parameters
- element: T
  Initial element for this component
Returns ElementComponent<T>
Overrides NodeComponent.constructor
- Defined in ElementComponent.ts:49

Properties

`Readonly`node

node: T

This component's node

Methods

after

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

append

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

attr

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

before

before(...components: NodeComponent<any>[]): ElementComponent<T>
Insert components in the children list of this ElementComponent’s parent, just before this ElementComponent.
Parameters
- ...components: NodeComponent<any>[]
  Components to insert
Returns ElementComponent<T>
- 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
- Defined in ElementComponent.ts:197

class

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

`Abstract`clone

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

See
Node: cloneNode() - MDN
Inherited from NodeComponent.clone
- Defined in NodeComponent.ts:67

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 NodeComponent.context
- Defined in NodeComponent.ts:40

empty

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

Returns ElementComponent<T>
Overrides NodeComponent.empty
- Defined in ElementComponent.ts:216

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]
- 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
- 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
- Defined in ElementComponent.ts:162

isVisible

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

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

on

on<K extends keyof ElementEventMap>(
type: K,
listener: (ev: ElementEventMap[K], component: this) => any,
): ElementComponent<T>
Add event listener
Type Parameters
- K extends keyof ElementEventMap
Parameters
- type: K
  A case-sensitive string representing the event type to listen for.
- listener: (ev: ElementEventMap[K], component: this) => any
  The function that is called when an event of the specified type occurs.
Returns ElementComponent<T>
Overrides NodeComponent.on
- Defined in ElementComponent.ts:209
on<K extends keyof ElementEventMap>(
    type: K,
    listener: (ev: ElementEventMap[K], component: this) => any,
    options: AddEventListenerOptions,
): ElementComponent<T>
Add event listener
Type Parameters
- K extends keyof ElementEventMap
Parameters
- type: K
  A case-sensitive string representing the event type to listen for.
- listener: (ev: ElementEventMap[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 ElementComponent<T>
Overrides NodeComponent.on
- Defined in ElementComponent.ts:210
on<K extends keyof ElementEventMap>(
    type: K,
    listener: (ev: ElementEventMap[K], component: this) => any,
    useCapture: boolean,
): ElementComponent<T>
Add event listener
Type Parameters
- K extends keyof ElementEventMap
Parameters
- type: K
  A case-sensitive string representing the event type to listen for.
- listener: (ev: ElementEventMap[K], component: this) => any
  The function that is called when an event of the specified type occurs.
- useCapture: boolean
  See useCapture on MDN
Returns ElementComponent<T>
Overrides NodeComponent.on
- Defined in ElementComponent.ts:211

prepend

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

remove

remove(): this
Remove the element

Returns this
- Defined in ElementComponent.ts:204

removeAttr

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

removeClass

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

replaceClass

replaceClass(
oldClasses: string | string[],
newClasses: string | string[],
): ElementComponent<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 ElementComponent<T>
- Defined in ElementComponent.ts:111

set

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

slot

slot(slot: string, parent?: ParentNode): ElementComponent<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 ElementComponent<T>
Throws
DOMException When the slot is not found
Inherited from NodeComponent.slot
- Defined in NodeComponent.ts:100

text

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

toggleClass

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

toString

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

Returns string
- Defined in ElementComponent.ts:224

Class ElementComponent<T>Abstract

Type Parameters

Hierarchy (View Summary)

Index

Constructors

Properties

Methods

Constructors

Protectedconstructor

Type Parameters

Parameters

Returns ElementComponent<T>

Properties

Readonlynode

Methods

after

Parameters

Returns ElementComponent<T>

append

Parameters

Returns ElementComponent<T>

attr

Parameters

Returns ElementComponent<T>

before

Parameters

Returns ElementComponent<T>

boundingClientRect

Returns DOMRect

See

class

Parameters

Returns ElementComponent<T>

Abstractclone

Parameters

Returns NodeComponent<T>

See

context

Parameters

Returns this

empty

Returns ElementComponent<T>

get

Type Parameters

Parameters

Returns T[K]

hasClass

Parameters

Returns boolean

html

Parameters

Returns this

Example

See

isVisible

Returns boolean

See

on

Type Parameters

Parameters

Returns ElementComponent<T>

Type Parameters

Parameters

Returns ElementComponent<T>

Type Parameters

Parameters

Returns ElementComponent<T>

prepend

Parameters

Returns ElementComponent<T>

remove

Returns this

removeAttr

Parameters

Returns ElementComponent<T>

removeClass

Parameters

Returns ElementComponent<T>

replaceClass

Parameters

Class ElementComponent<T>`Abstract`

`Protected`constructor

`Readonly`node

`Abstract`clone