https://github.com/anywhichway/quick-component

A small utility for rapidly creating remotely loadable, on-demand, isolatable web components
https://github.com/anywhichway/quick-component

Last synced: about 4 hours ago
JSON representation

A small utility for rapidly creating remotely loadable, on-demand, isolatable web components

• Host: GitHub
• URL: https://github.com/anywhichway/quick-component
• Owner: anywhichway
• License: mit
• Created: 2022-09-09T16:41:13.000Z (about 2 years ago)
• Default Branch: main
• Last Pushed: 2022-11-28T02:59:48.000Z (almost 2 years ago)
• Last Synced: 2024-09-17T07:59:04.318Z (about 2 months ago)
• Language: JavaScript
• Size: 21.5 KB
• Stars: 0
• Watchers: 3
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# quick-component

A small utility for rapidly creating remotely loadable, on-demand, isolatable web components

# Script Tag Usage

The easiest way to use `@anywhichway/quick-component` is to load both it and the component it is using from a CDN, e.g.

```html

```

If you are using JSDelivr, by default the tag name will be the file or terminal directory name of the component without a version number. Component versioning is 

currently only supported for JSDeliver.

You can provide an alternate tag with the 'as' attribute:

```html

```

These additional attributes are available:

`import` - An array of CSS selectors that allow importing component elements into the head of the

requesting document. This is sometimes necessary to support styling or JavaScript libraries that

were not necessarily designed to run in a shadowDOM. If import is not specified it defaults to

`["link","style","script"]`.

`isolate` - Takes the value "true" or "false". The value "true" places the actual contents of the

component into an iframe and creates a proxy around the iframe to support automatic resizing.

If `isolate` is "true", you can configure the iframe security using the same attributes used by an iframe, i.e.

`allow`, `allowfullscren`, `allowpaymentrequest`, `referrerpolicy`, `csp`, `sandbox`. See

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe. 

# API Usage

To be written.

# Defining Components

To be written.

# Version History (reverse chronological order)

2022-11-27 v0.0.14 Added error handling for defining a component twice

2022-10-13 v0.0.13 Added runtime debug support. Removed `isCustomelement()` use `customElements.get(tagName)` instead.

2022-10-11 v0.0.12 Prevent infinite loops when innerHTML is changed to same value. Added ability to pass in extra

properties when defining component.

2022-10-09 v0.0.11 Added support for subclassing standard HTML tags.

2022-09-25 v0.0.10 Optimized for third-party libraries loading.

2022-09-25 v0.0.9 Removed excess code. Eliminated memory leak from event handler.

2022-09-25 v0.0.8 Optimized to reduce frequency of loading component scripts.

2022-09-10 v0.0.7 Added support for imports then loading components via a script tag.

2022-09-10 v0.0.6 Ensure that components defined using `./index.js` do not cache the `./index.js` file since it needs

to be applied every time an element is created.

2022-09-10 v0.0.5 Added documentation and better support for loading both module and regular script based components.