By default, data-link on an HTML element such as div
(basically any element other than form elements like input
or select
) will have a default target of innerText
, so HTML markup in the string will be rendered as markup, not inserted into the DOM as HTML elements. (Equivalent to HTML encoding by the browser.)
However you can set a different target 'attrib' and write, for example,
<div data-link="title{:~conv(data)}" />
to target the title
property of the div
, or
<div data-link="css-background-color{:~conv(data)}" />
to target the background color style.
For your scenario you can write
<div data-link="html{:~conv(data)}" />
to target innerHTML
. That way your data or converter or helper output can be inserted into the DOM as HTML elements. (Less secure of course...).
BTW you can add converters too, as in:
<div data-link="html{myCnvt:~conv(data)}" />
To come full circle, if you use the html encoder as converter, as in:
<div data-link="html{html:~conv(data)}" />
which can also be writtne in the abbreviated form:
<div data-link="html{>~conv(data)}" />
then that will actually use innerHTML
but will add HTML encoding before insertion.