Class SvgComponent

Readonlynode

after

• after(...components: NodeComponent<any>[]): SvgComponent

  Insert components in the children list of this ElementComponent’s parent, just after this ElementComponent.

  Parameters

  • ...components: NodeComponent<any>[]

    Components to insert

  Returns SvgComponent

append

• append(...components: NodeComponent<any>[]): SvgComponent

  Insert component after the last child

  Parameters

  • ...components: NodeComponent<any>[]

  Returns SvgComponent

attr

• attr(name: string, value?: string): SvgComponent

  Set attribute

  Parameters

  • name: string

    attribute name
  • Optionalvalue: string

    attribute value

  Returns SvgComponent

before

• before(...components: NodeComponent<any>[]): SvgComponent

  Insert components in the children list of this ElementComponent’s parent, just before this ElementComponent.

  Parameters

  • ...components: NodeComponent<any>[]

    Components to insert

  Returns SvgComponent

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

class

• class(...classes: string[]): SvgComponent

  Add classes

  Parameters

  • ...classes: string[]

  Returns SvgComponent

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

empty

• empty(): SvgComponent

  Empty the component (remove children)

  Returns SvgComponent

get

• get<K extends ReadableKeys<SVGSVGElement>>(name: K): SVGSVGElement[K]

  Get element property

  Type Parameters

  • K extends ReadableKeys<SVGSVGElement>

  Parameters

  • name: K

    property name

  Returns SVGSVGElement[K]

hasClass

• hasClass(...classes: string[]): boolean

  Check if component has class

  Parameters

  • ...classes: string[]

  Returns boolean

  true if component has all the specified classes

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.
  Copy

  See

  Template literals (Template strings) - MDN

isVisible

• isVisible(): boolean

  Check whether the component is visible.

  Returns boolean

  See

  Element: checkVisibility() - MDN

on

• on<K extends keyof ElementEventMap>(
      type: K,
      listener: (ev: ElementEventMap[K], component: this) => any,
  ): SvgComponent

  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 SvgComponent
• on<K extends keyof ElementEventMap>(
      type: K,
      listener: (ev: ElementEventMap[K], component: this) => any,
      options: AddEventListenerOptions,
  ): SvgComponent

  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 SvgComponent
• on<K extends keyof ElementEventMap>(
      type: K,
      listener: (ev: ElementEventMap[K], component: this) => any,
      useCapture: boolean,
  ): SvgComponent

  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 SvgComponent

prepend

• prepend(...components: NodeComponent<any>[]): SvgComponent

  Insert component before the first child

  Parameters

  • ...components: NodeComponent<any>[]

  Returns SvgComponent

remove

• remove(): this

  Remove the element

  Returns this

removeAttr

• removeAttr(name: string): SvgComponent

  Remove attribute

  Parameters

  • name: string

    attribute name

  Returns SvgComponent

removeClass

• removeClass(...classes: string[]): SvgComponent

  Remove classes

  Parameters

  • ...classes: string[]

  Returns SvgComponent

replaceClass

• replaceClass(
      oldClasses: string | string[],
      newClasses: string | string[],
  ): SvgComponent

  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 SvgComponent

set

• set<K extends WritableKeys<SVGSVGElement>>(
      name: K,
      value: SVGSVGElement[K],
  ): SvgComponent

  Set element property

  Type Parameters

  • K extends WritableKeys<SVGSVGElement>

  Parameters

  • name: K

    property name
  • value: SVGSVGElement[K]

    property value

  Returns SvgComponent

slot

• slot(slot: string, parent?: ParentNode): SvgComponent

  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 SvgComponent

  Throws

  DOMException When the slot is not found

text

• text(text: string): SvgComponent

  Set text content

  Parameters

  • text: string

  Returns SvgComponent

toggleClass

• toggleClass(...classes: string[]): SvgComponent

  Toggle classes

  Parameters

  • ...classes: string[]

  Returns SvgComponent

toString

• toString(): string

  Get this component's outer HTML

  Returns string