Partials as "Component"
Partials can be super powerful when it comes to create specific component and the fact you can refer to them by name, you can include them with custom data everywhere you want.
<!-- _search-field.html -->
<label class="search-field" aria-label="search field">
<input type="search" name="search" placeholder="{props.placeholder}" value="{props.value ?? ''}">
</label>Than you can use it with the include tag
<!-- index.html -->
<include name="search-field" data="{props: {placeholder: 'Search...'}}"></include>Use custom tags as much as possible first
Partials can be a great way to reuse layout markup either for the entire page or a section of it but for a small component level markup, consider using custom tags since it is:
- Faster to parse and load;
- Easier to reuse by referencing the content by a tag name;
- Easy to associate style with the markup;
- Easier to do more complex markup related things like utilizing third party;