pHTML Self Closing

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

1<div><div class="main"/></div>
2<template><slot name="title"/></template>
3<custom-element/>
4
5<!-- becomes -->
6
7<div><div class="main"></div></div>
8<template><slot name="title"></slot></template>
9<custom-element></custom-element>

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

Usage

Transform HTML files directly from the command line:

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

Node

Add pHTML Self Closing to your project:

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

Use pHTML Self Closing to process your HTML:

1const phtmlSelfClosing = require('@phtml/self-closing');
2
3phtmlSelfClosing.process(YOUR_HTML /*, processOptions, pluginOptions */);

Or use it as a pHTML plugin:

1const phtml = require('phtml');
2const phtmlSelfClosing = require('@phtml/self-closing');
3
4phtml([
5  phtmlSelfClosing(/* pluginOptions */)
6]).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.

1phtmlSelfClosing({ ignore: 'a' });

1<a/>
2<custom-element/>
3<div/>
4
5<!-- becomes -->
6
7<a/>
8<custom-element></custom-element>
9<div></div>

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

1phtmlSelfClosing({ ignore: ['a', 'custom-element'] });

1<a/>
2<custom-element/>
3<div/>
4
5<!-- becomes -->
6
7<a/>
8<custom-element/>
9<div></div>