open-index/open-npm huggingface dataset:
npm package: @hunchcloud/elements
Description: A collection of custom elements
Author: Ping Chen
Latest version: 0.4.0

# Hunch Elements

[![npm](https://img.shields.io/npm/v/@hunchcloud/elements.svg)](https://www.npmjs.com/package/@hunchcloud/elements)

A collection of custom element. Originally designed to be used on [Hunch](https://hunch.cloud), but can be used anywhere web components are supported.

🛸 [Documentation](https://hunch-elements.netlify.com)

Install by

```
yarn add @hunchcloud/elements
```

then import by

```
import '@hunchcloud/elements';
```

And you will be able use the following elements:

- `<hunch-auto-focus>`: focus the first child element with the `autofocus` attribute
- `<hunch-carousel>`: a carousel/slider element
- `<hunch-img>`: a lazy loading image element
- `<hunch-navbar>`: a responsive navbar element
- `<hunch-tabs>`: a tab container element
npm package: @hunchcloud/live-element
Description: A custom element to live edit other custom elements
Author: Ping Chen
Latest version: 0.3.2

# `<live-element>`

[![npm](https://img.shields.io/npm/v/@hunchcloud/live-element.svg)](https://www.npmjs.com/package/@hunchcloud/live-element)

A custom element to live edit other custom elements. Like react-live, but for web components (custom elements).

💫️ [Demos](https://live-element.glitch.me/)

![demo.gif](demo.gif)

## Usage

Install by

```
yarn add @hunchcloud/live-element
```

Insert the following HTML

```html
<live-element>
  <textarea>
    <your-custom-element></your-custom-element>
  </textarea>
<live-element>
```

Then you will get a playground to live edit `<your-custom-element>`.

Notice the `<textarea>` wrapper is required to prevent `<your-custom-element>` rendering before being passed to `<live-element>`.

## Customize editor styles

Use `style-template-id` to pass in customized styles.

```html
<template id="prism-solarized">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.19.0/themes/prism-solarizedlight.min.css" />
  <style>
    #live-editor {
      color: #657b83;
      background: #073642;
    }
    ::slotted(*) {
      background: lightcyan;
    }
  </style>
</template>

<live-element style-template-id="prism-solarized">
  <textarea>
    <your-custom-element></your-custom-element>
  </textarea>
<live-element>
```

## Development

```
parcel example/demo.md
```
npm package: @hunchcloud/meta-card
Description: Custom elements to render meta tags
Author: Ping Chen
Latest version: 0.4.2

# `<meta-card>`

[![npm](https://img.shields.io/npm/v/@hunchcloud/meta-card.svg)](https://www.npmjs.com/package/@hunchcloud/meta-card)

A custom element to render open graph meta tags.

[Demo](https://hunchcloud.github.io/meta-card/).