Skip to content
Expand self-closing tags in HTML
HTML JavaScript
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
src
test
.editorconfig
.gitignore
.rollup.js
.tape.js
.travis.yml
CHANGELOG.md
CONTRIBUTING.md
INSTALL.md
LICENSE.md
README.md
package.json

README.md

pHTML Self Closing pHTML

NPM Version Build Status Support Chat

pHTML Self Closing lets you use self-closing tags in HTML.

<div><div class="main"/></div>
<template><slot name="title"/></template>
<custom-element/>

<!-- becomes -->

<div><div class="main"></div></div>
<template><slot name="title"></slot></template>
<custom-element></custom-element>

Note: The <script> and <style> tags are ignored.

Usage

Transform HTML files directly from the command line:

npx phtml source.html output.html -p @phtml/self-closing

Node

Add pHTML Self Closing to your project:

npm install @phtml/self-closing --save-dev

Use pHTML Self Closing to process your HTML:

const phtmlSelfClosing = require('@phtml/self-closing');

phtmlSelfClosing.process(YOUR_HTML /*, processOptions, pluginOptions */);

Or use it as a pHTML plugin:

const phtml = require('phtml');
const phtmlSelfClosing = require('@phtml/self-closing');

phtml([
  phtmlSelfClosing(/* pluginOptions */)
]).process(YOUR_HTML /*, processOptions */);

pHTML Self Closing runs in all Node environments, with special instructions for:

Node CLI Eleventy Gulp Grunt

Options

ignore

The ignore option defines self-closing elements that will not be expanded.

phtmlSelfClosing({ ignore: 'a' });
<a/>
<custom-element/>
<div/>

<!-- becomes -->

<a/>
<custom-element></custom-element>
<div></div>

The ignore option accepts a string or an array of strings.

phtmlSelfClosing({ ignore: ['a', 'custom-element'] });
<a/>
<custom-element/>
<div/>

<!-- becomes -->

<a/>
<custom-element/>
<div></div>
You can’t perform that action at this time.