pHTML Self Closing

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>