Coming from some of Eleventy’s other template languages, you’re probably used to wrapping your variable names in curly braces.
The equivalent in WebC is a
<template> with an
@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<sup>st</sup>”, WebC will write out
Writing Unescaped HTML
With Nunjucks, you can use the
safe filter to prevent the value from being escaped.
In WebC we can use either the
@raw or the
@raw property is the most similar to
safe, so let’s begin there.
Given our previous example of a
title variable containing the text “1<sup>st</sup>”, 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
The difference between
@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
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.