Tags

Mend tags / Pkg tags

Mend only performs custom behavior for tags that begin with mend:. This creates a clear separation of parts that are non-standard.

• 📦 Tag list
  • 📌 Slot
  • Self-closing tags
    • 📌 Include
  • Paired tags
    • 📌 If
    • 📌 Extend
• 📦 Package tags
• 📦 Attribute overloading

📦 Tag list

📌 Slot

<mend:slot />
<!-- or -->
<mend:slot>
    ...
</mend:slot>

Indicates the point of insertion for the content passed in the Extend block.

Self-closing tags

📌 Include

<mend:include :src="path/to/file" />

Parses and inserts the specified file in place of the tag. Can have its attributes overloaded

Paired tags

📌 If

<mend:if :true="[[ <expression> ]]">
    ...
</mend:if>

<mend:if :false="[[ <expression> ]]">
    ...
</mend:if>

Checks whether the expression returns true or false (based on the attribute) and removes the contents when the statement doesn't match.

📌 Extend

<mend:extend :src="path/to/file">
    ...
</mend:extend>

Parses and inserts the specified file in place of the tag. All children of the tag will be placed where the Slot located inside of the extended file (assuming its present). Can have its attributes overloaded

📦 Package tags

To make life easier, both include and extend have a shorthand of using pkg: prefixed tags.

<pkg:my-component-name>
    ...
</pkg:my-component-name>
<!-- is the same as -->
<mend:extend :src="<find my-component-name.html somewhere>">
    ...
</mend:extend>

<pkg:another-component />
<!-- is the same as -->
<mend:include :src="<find another-component.html somewhere>" />

The resolver will attempt to find the file recursively inside of the same directory as the template.

All properties of <mend:extend> and <mend:include> apply to pkg: tags.

📦 Attribute overloading

You can overwrite an attribute of an included/extended tag by simply providing them in the attribute section of a tag:

<mend:include :src="path/to/file" class="my class list" />

You can also append attribute (if it's defined in the root tag) using %s:

<mend:include :src="path/to/file" class="%s and other classes" />