Outputting a Variable

Coming from some of Eleventy’s other template languages, you’re probably used to wrapping your variable names in curly braces.

{{ title }}

The equivalent in WebC is a <template> with an @text property.

<template @text="title" webc:nokeep></template>

@text is a special property in WebC for setting the text of an element from data. webc:nokeep tells WebC to discard the tag once it’s done processing it, so that our variable contents don’t end up wrapped in a <template> tag in our final markup.

WebC escapes strings when used with @text the same way that Nunjucks escapes strings by default. So if your title variable contains the string “1^st”, WebC will write out 1<sup>st</sup>.

Writing Unescaped HTML

With Nunjucks, you can use the safe filter to prevent the value from being escaped.

{{ title | safe }}

In WebC we can use either the @raw or the @html properties. The @raw property is the most similar to safe, so let’s begin there.

<template @raw="title" webc:nokeep></template>

Given our previous example of a title variable containing the text “1^st”, the above template in WebC would preserve the HTML in our output.

Processing WebC Components in the Output

The other property that passes text through unescaped is @html. The difference between @raw and @html is that @html will run the output through WebC again. So, if you have a variable that may have WebC components in it, you’ll want to use @html, not @raw. Be careful about using @html in layout chains, because if you have a WebC component that doesn’t remove its custom element, this element could be reprocessed multiple times as Eleventy works its way up the layout chain.