https://github.com/reshape/custom-elements
plugin that parses custom element names into classes
https://github.com/reshape/custom-elements
Last synced: 12 months ago
JSON representation
plugin that parses custom element names into classes
- Host: GitHub
- URL: https://github.com/reshape/custom-elements
- Owner: reshape
- License: mit
- Created: 2016-08-09T16:31:41.000Z (almost 10 years ago)
- Default Branch: master
- Last Pushed: 2022-02-11T21:36:52.000Z (over 4 years ago)
- Last Synced: 2025-05-16T00:48:11.937Z (about 1 year ago)
- Language: JavaScript
- Size: 549 KB
- Stars: 5
- Watchers: 2
- Forks: 1
- Open Issues: 8
-
Metadata Files:
- Readme: README.md
- Contributing: contributing.md
- License: LICENSE
Awesome Lists containing this project
README
# Reshape Custom Elements
[](https://npmjs.com/package/reshape-custom-elements)
[](https://travis-ci.org/reshape/custom-elements?branch=master)
[](https://david-dm.org/reshape/custom-elements)
[](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
Text
Label
Reshape is licensed under the MIT license
This will get wrapped in a div instead of a span
```
### 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
Text
Label
This will get wrapped in a div instead of a span
Reshape is licensed under the MIT license
```
## 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)