pHTML Define
pHTML Define lets you use custom defined elements in HTML.
<!-- definitions.html --> $ <!-- index.html --> 10 Unlimited foo <!-- becomes --> $10 Basic Unlimited foo
Note: classes assigned to the custom element are passed on to all top level children in the element definition.
Definition elements (<define>
) can exist on the same page they are being
referenced. Definition imports (<link rel="html" href>
) can reference real URLs.
Slots
Slots are dynamically replaced elements and attribute values.
Within <define>
elements, slots can referenced as elements or attribute
values. A <slot>
element identifies its replacement with a name
attribute —
e.g <slot name="some-id" />
— while a slot attribute value identifies its
replacement with a dollar sign ($
), wrapping curly braces ({}
), and a
slot
prefix — e.g. ${slot-some-id}
.
<!-- a slot element referencing "price" --> <!-- a slot element referencing "price" with a fallback value of "0" -->0
<!-- a slot attribute value referencing "src" --> <!-- a slot attribute value referencing "src" with a fallback value of "default.jpg" -->
Within custom elements, slots are populated by element or attribute.
<!-- populate a slot named "src" with image.jpg -->
<!-- populate a slot named "src" with image.jpg -->image.jpg
<!-- populate a slot named "features" with <p>I will run</p> -->I will run
Usage
Add pHTML Define to your project:
npm install @phtml/define --save-dev
Use pHTML Define to process your HTML:
const phtmlDefine = ; phtmlDefine;
Or use it as a pHTML plugin:
const phtml = ;const phtmlDefine = ; ;
pHTML Define runs in all Node environments, with special instructions for:
Node | CLI | Eleventy | Gulp | Grunt |
---|
Options
preserve
The preserve
option determines whether all custom element containers should remain. By default, custom element containers are not preserve. However when
custom elements are preserved, their original children are moved into a
<template>
element.
// preserve all custom elements;
10 Unlimited foo <!-- becomes --> 10 Unlimited foo $10 Basic Unlimited foo
cwd
The cwd
option defines and overrides the current working directory of
<link rel="html" href>
.
// resolve all relative html links to /some/absolute/path;
transformSlots
Custom elements, that populate slots of a parent custom element, are not replaced with their defined custom element templates.
transformSlots
enables this nested replacement.
;
<!-- definitions.html --> $ Click Me <!-- index.html --> 10 Unlimited foo <!-- becomes --> $10 Basic Unlimited foo Buy now