Partials with WebC

Updated: 6 October 2022

Partials — or snippets — are the simplest form of code reuse. They require no parameterization. You simply plop them down somewhere in your markup and they get replaced by a different block of code. They may be completely static, or rely only on some globally available context.

Partials in WebC are trivially easy.

<footer>
	<p>&copy; 2022 Yours Truly.</p>
</footer>

site-footer.webc

With the above .webc file, we can simply plop down <site-footer></site-footer> anywhere in our markup and when the WebC compiler encounters that tag, it will replace it with our footer markup. Easy peasy.

This even works for SVG icons. Download the SVG, copy it into wherever WebC expects to find components, and replace the .svg extension with .webc. Then you can use a custom element tag anywhere in your markup, and WebC will replace it with the contents of that SVG.