# reshape-custom-elements

> transform custom element names into class names

Latest version **1.0.0** (published 2019-06-03) · MIT license · 0 weekly downloads

## Install

```sh
npm install reshape-custom-elements
pnpm add reshape-custom-elements
yarn add reshape-custom-elements
bun add reshape-custom-elements
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities; high quality score.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.0 |
| Published | 2019-06-03 |
| First published | 2016-08-10 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 11.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 5 |
| Author | Jeff Escalante |
| Maintainers | jescalan |
| Keywords | custom-elements, html, reshape-plugin |

## Links

- npm: https://www.npmjs.com/package/reshape-custom-elements
- Repository: https://github.com/reshape/custom-elements
- Issues: https://github.com/reshape/custom-elements/issues
- npm.io page: https://npm.io/package/reshape-custom-elements

## Dependencies (1)

- [reshape-plugin-util](https://npm.io/package/reshape-plugin-util.md) ^0.2.1

## Alternatives

- [@tsparticles/shape-image](https://npm.io/package/@tsparticles/shape-image.md) — 303.7K weekly downloads
- [@tsparticles/shape-line](https://npm.io/package/@tsparticles/shape-line.md) — 233.7K weekly downloads
- [stringify-attributes](https://npm.io/package/stringify-attributes.md) — 58.6K weekly downloads
- [mobile-drag-drop](https://npm.io/package/mobile-drag-drop.md) — 46.3K weekly downloads
- [@comunica/actor-rdf-parse-html](https://npm.io/package/@comunica/actor-rdf-parse-html.md) — 29.2K weekly downloads

## Recent versions

- 1.0.0 (latest) — 2019-06-03
- 0.2.0 — 2019-05-08
- 0.1.0 — 2016-08-10

## README

# Reshape Custom Elements

[![npm](https://img.shields.io/npm/v/reshape-custom-elements.svg?style=flat-square)](https://npmjs.com/package/reshape-custom-elements)
[![tests](https://img.shields.io/travis/reshape/custom-elements.svg?style=flat-square)](https://travis-ci.org/reshape/custom-elements?branch=master)
[![dependencies](https://img.shields.io/david/reshape/custom-elements.svg?style=flat-square)](https://david-dm.org/reshape/custom-elements)
[![coverage](https://img.shields.io/coveralls/reshape/custom-elements.svg?style=flat-square)](https://coveralls.io/r/reshape/custom-elements?branch=master)

Transform custom element names into class names.

## Installation

```sh
npm i reshape-custom-elements --save
```

## Usage

### Input HTML

```html
<my-component>
  <my-text class="text">Text</my-text>

  <!-- An actual HTML element defined in additionalTags -->
  <label>Label</label>

  <!-- Overriding the default replacement tag with a map -->
  <my-footer>
    Reshape is licensed under the MIT license
  </my-footer>

  <!-- Locally overriding the default replacement tag with an attribute -->
  <my-text data-replacement="div">
    This will get wrapped in a div instead of a span
  </my-text>
</my-component>
```

### Reshape processing

```js
const reshape = require('reshape')
const customElements = require('reshape-custom-elements')

reshape({
  plugins: [
    customElements({
      replacementTag: 'span',
      additionalTags: ['label'],
      replacementTagMap: {
        footer: ['my-footer']
      }
    })
  ]
})
  .process(html)
  .then(res => console.log(res.output()))
```

### Output HTML

```html
<span class="my-component">
  <span class="my-text text">Text</span>

  <span class="label">Label</span>

  <div class="my-text">
    This will get wrapped in a div instead of a span
  </div>

  <footer class="my-footer">
    Reshape is licensed under the MIT license
  </footer>
</span>
```

## Options

| Name                                | Description                                                                                                                                                | Default            |
| ----------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------ |
| **defaultReplacementTag**           | Tag used to replace the custom element tag name                                                                                                            | `div`              |
| **additionalTags**                  | Array of tags to be processed despite being a normal HTML tag. HTML tags that are used in the `replacementTagMap` will automatically be added to this list | `[]`               |
| **blacklist**                       | Array of tags that should never be processed                                                                                                               | `[]`               |
| **replacementTagMap**               | Object containing custom tag ↔ replacement tag mappings in the format: `ReplacedTag: [ customTag1, customTag2, ... ]`. Overrides `replacementTag`          | `{}`               |
| **replacementTagOverrideAttribute** | Attribute name that can be used to locally override the used replacement tag. Overrides `replacementTag` and `replacementTagMap`                           | `data-replacement` |

## License

- Licensed under [MIT](LICENCE.md)
- See our [contributing guidelines](contributing.md)

---
_Source: https://npm.io/package/reshape-custom-elements · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._