godown v3.10.1

godown

Non Composite Web Components Library.

Install

npm i godown

Import

Import one component.

import Alert from "godown/alert.js";

Import all components.

import { Alert } from "godown";

Usage

HTML

<godown-alert title="Alert"></godown-alert>

JS

import { Alert } from "godown";

const alert = new Alert();
alert.title = "Alert";

document.body.appendChild(alert);

React

React components is now in the standalone package (@godown/react).

React package provides empty conversion.

import Alert from "@godown/react/alert";

export default function () {
  return <Alert title="Alert" />;
}

Tips

Initial properties

The constructor parameter can accept an initial value record and assign it after connected to document.

Element will override the records of the superclass.

GodownElement (require @godown/element) will work for all elements.

import GodownElement from "@godown/element";

GodownElement.godownConfig ||= new GodownConfig();
GodownElement.godownConfig.assign = {
  classList: ["godown-element", "custom-element"],
};

import Input from "godown/input.js";
new Input({ id: "my-input" });

<godown-input id="my-input" class="godown-element custom-element"></godown-input>

With CSS

This is useful when customizing styles.

.godown-element {
  --godown--background: rgb(0 0 0);
  font-size: 20px;
}

Tag naming

Modify the element prefix and suffix, the tag name will be joined with -.

GodownElement.godownConfig.prefix = "g";
GodownElement.godownConfig.suffix = "";

Modify the tag method to return the element name directly.

GodownElement.godownConfig.tag = function (origin) {
  return this.prefix + "-" + origin;
};

<g-button></g-button>

CSS variable prefix

Element-scoped css variables will start with --${tagName}--.

<godown-button style="--godown-button--focus-scale: .95;"></godown-button>

Undefined

Undefined elements at /web-components/${name}/component.js.

import Button "godown/web-components/button/component.js";

customElements.define("my-button", Button);

<my-button>Click me</my-button>