Let's create a new custom element called "string-input":

// Inherit from the Hawkejs.Element class
var StringInput = Function.inherits('Hawkejs.Element', function StringInput() {
	StringInput.super.call(this);
});

// Set the template file
StringInput.setTemplateFile('elements/string_input');

And now create the actual content template of this custom element in elements/string_input.

There are some things you might want to use:

• Elements with a data-he-slot attribute will get the content of <slot> elements used in the declaration template. You'll see this in action later.
• The self variable is a reference to the current custom element itself, like $0 is a reference to the current element.

<label>
<p class="inputlabel">
	<span class="label" data-he-slot="label"></span>
	<span class="description" data-he-slot="description"></span>
</p>
<div class="inputbox">
	<input
			name=<% self.getAttribute('input-name') || 'name' %>
			placeholder=<% self.getAttribute('placeholder') %>
			class="input"
			value="<% self.getAttribute('value') || '' %>"
			type=<% self.getAttribute('type') || 'text' %>
	>
</div></label>

Finally, let's use this custom element in an actual template:

<string-input class="inputfield" input-name="my-string-input">
<span slot="label">This label should be used</span>
<span slot="description">This is the description</span></string-input>

If you render this, the result will be:

<string-input class="inputfield" input-name="my-string-input">
<label>
    <p class="inputlabel">
    	<span class="label" data-he-slot="label">This label should be used</span>
    	<span class="description" data-he-slot="description">This is the description</span>
    </p>
    <div class="inputbox">
    	<input
    			name="my-string-input"
    			placeholder=""
    			class="input"
    			value=""
    			type="text"
    	>
    </div>
    </label></string-input>