Skip to content
Create Custom Elements from Templates in HTML
JavaScript HTML
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 Template pHTML

NPM Version Build Status Support Chat

pHTML Template lets you create and reuse pre-rendered templates in HTML.

<header is:template="heading">
  <h1 is:slot>Page Heading</h1>
  <hr />
  <is:slot name="subheading"></is:slot>
</header>

Templates are made with the <is:template> element or is:template attribute, and they are used with the <as:template> element or as:template atttribute.

<as:template name="heading">
  Goodbye Mars
  <p as:slot="subheading">We really painted the town red...</p>
</as:template>

<!-- becomes -->

<header>
  <h1>Goodbye Mars</h1>
  <hr />
  <p>We really painted the town red...</p>
</header>

Slots are made with the <is:slot> element and is:slot attribute, and their contents are replaced with the <as:slot> element or as:slot attribute.

When slot content is not replaced, its original content is rendered.

<as:template name="heading"></as:template>

<!-- becomes -->
<header>
  <h1>Main Section</h1>
  <hr />
</header>

Is and As

The <is:*> and <as:*> elements define “fragment containers” which are not actually rendered. Nameless content goes into nameless slots.

<is:template name="replace"><is:slot>Replaceable Content</is:slot></is:template>

<as:template name="replace">Replaced Content</as:template>

<!-- becomes -->
Replaced Content

The is:* and as:* attributes render their container, and when both used together then the “is” element always wraps the “as” element.

<is:template name="replace"><p is:slot>Replaceable Content</p></is:template>

<as:template name="replace"><span class="inner-span" as:slot>Replaced Content</span></as:template>

<!-- becomes -->
<p><span class="inner-span">Replaced Content</span></p>

When the as:template attribute is used, its element becomes the wrapper for nameless slots.

<is:template name="replace"><p is:slot>Replaceable Content</p></is:template>

<span class="inner-span" as:template="replace">Replaced Content</span>

<!-- becomes -->

<p><span class="inner-span">Replaced Content</span></p>

Usage

Transform HTML files directly from the command line:

npx phtml source.html output.html -p @phtml/template

Node

Add pHTML Template to your project:

npm install @phtml/template --save-dev

Use pHTML Template to process your HTML:

const phtmlTemplate = require('@phtml/template');

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

Or use it as a pHTML plugin:

const phtml = require('phtml');
const phtmlTemplate = require('@phtml/template');

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

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

Node CLI Eleventy Gulp Grunt

Options

importFrom

The importFrom option specifies objects and sources where Templates can be imported from.

phtmlTemplate({
  importFrom: 'path/to/file.html'
});

These sources might be HTML, JS, and JSON files, functions, and directly passed objects.

phtmlTemplate({
  importFrom: [
    {
      'phtml-templates': [
        {
          from: 'path/to/file.html'
        },
        {
          html: '<header is:template="heading">\n  <h1 is:slot>Page Heading</h1>\n  <hr />\n  <is:slot name="subheading"></is:slot>\n</header>'
        },
        () => {
          return [
            'path/to/another-file.html',
            {
              html: '<header is:template="another-heading">\n  <h1 is:slot>Page Heading</h1>\n  <hr />\n  <is:slot name="subheading"></is:slot>\n</header>'
            }
          ];
        }
      ]
    }
  ]
});
You can’t perform that action at this time.