Skip to main content
Deno 2 is finally here 🎉️
Learn more
Module

x/pouch/deps.ts

Collection of Web Components
Latest
import * as pouch from "https://deno.land/x/pouch@v0.0.8/deps.ts";

Variables

Uses htm (Hyperscript Tagged Markup) under the hood and works in all modern browsers. The function html takes a tagged template and processes the AllowedExpressions where falsy values are converted to an empty string and numbers are stringified. The children, who match the id and class selectors marked with an @ sign, will be added to the object this.dom in the process. It adds EventListeners with addEventListener(event, listener.bind(this)), so you don't need to use arrow functions anymore.

Functions

Takes a JavaScript style object and an optional selector (default is the custom element itself) and adds or changes specific inline styles to the element matching the selector without altering other style values. CSS custom properties (variables) are allowed.

Appends an HTMLTemplateElement as element to a parent.

The css tag function parses template literals which can contain expressions of the type string or HTMLTemplateElement.

The decorator customElement takes the tag name of the custom element and registers the custom element. The same tag name is assigned to the static is property.

Dispatch a CustomEvent which bubbles as default through the whole DOM.

The decorator property takes an optional object as argument with four optional properties:

  1. Setting reflect to false would stop the element's attribute from synchronising.
  2. Stop rerendering on property change by setting render to false.
  3. Wait for property assignment before rendering with the option wait.
  4. Check with assert if the input has a truthy value. Otherwise throw error. It also adds an array containing the names of the attributes you want to observe with the native lifecycle callback attributeChangedCallback.

Type Aliases

The type of HTML attributes.