Skip to main content
Home
Browse packagesDocsSign in

@akiraohgaki/chirit@1.6.2
Built and signed on GitHub Actions

latest
akiraohgaki/chirit

A library for building front-end applications.

This package works with Cloudflare Workers, Node.js, Deno, Bun, Browsers
This package works with Cloudflare Workers
This package works with Node.js
This package works with Deno
This package works with Bun
This package works with Browsers
JSR Score
100%
Published
a day ago (1.6.2)
class CustomElement
extends HTMLElementRef

A base class for building custom elements.

This class provides a mechanism for asynchronous updates and lifecycle callbacks.

Examples

▶

Create a custom element

 
// Create a custom class that extends the CustomElement class.
class ColorPreviewElement extends CustomElement {
  static override get observedAttributes(): Array<string> {
    return ['color', 'size'];
  }

  // When a observed attributes changes, the element is re-rendered.
  override render(): void {
    const color = this.getAttribute('color') ?? '#000000';
    const size = this.getAttribute('size') ?? '100px';

    this.style.display = 'inline-block';
    this.style.width = size;
    this.style.height = size;
    this.style.backgroundColor = color;

    this.textContent = color;
  }

  override updatedCallback(): void {
    console.log('color-preview-updated');
  }
}

// Define the custom element.
ColorPreviewElement.define('color-preview');

// Use the custom element in HTML.
// <color-preview color="#ff0000" size="100px"></color-preview>
// <color-preview color="#00ff00" size="100px"></color-preview>
// <color-preview color="#0000ff" size="100px"></color-preview>

Constructors

new
CustomElement()

Creates a new instance of the CustomElement class.

Properties

Returns the number of times the element has been updated.

Methods

adoptedCallback(
_oldDocument: Document,
_newDocument: Document,
): void

Callback invoked when the element is moved to a new document.

By default, to do nothing.

attributeChangedCallback(
_name: string,
oldValue: string | null,
newValue: string | null,
_namespace?: string | null,
): void

Callback invoked when an observed attribute changes.

By default, the element is updated.

Callback invoked when the element is connected to a parent node.

By default, the element is updated.

Callback invoked when the element is disconnected from a parent node.

By default, to do nothing.

errorCallback(exception: unknown): void

Callback invoked when an error occurs during the update process.

By default, output an error log.

render(): void

Renders the element's content.

This method should be implemented by subclasses to render the content.

update(): Promise<void>

Updates the element asynchronously, scheduling an update for later execution.

updateSync(): void

Updates the element synchronously, calling additional lifecycle callbacks.

Callback invoked when the element has been updated.

By default, to do nothing.

Static Properties

Returns an observed attributes.

Static Methods

define(
name: string,
options?: ElementDefinitionOptions,
): void

Defines a custom element.

Add Package

deno add @akiraohgaki/chirit

Import symbol

import CustomElement from "@akiraohgaki/chirit";

---- OR ----

Import directly with a jsr specifier

import CustomElement from "jsr:@akiraohgaki/chirit";

Add Package

npx jsr add @akiraohgaki/chirit

Import symbol

import CustomElement from "@akiraohgaki/chirit";

Add Package

yarn dlx jsr add @akiraohgaki/chirit

Import symbol

import CustomElement from "@akiraohgaki/chirit";

Add Package

pnpm dlx jsr add @akiraohgaki/chirit

Import symbol

import CustomElement from "@akiraohgaki/chirit";

Add Package

bunx jsr add @akiraohgaki/chirit

Import symbol

import CustomElement from "@akiraohgaki/chirit";