AEM 6.1，HTL ::无法将样式应用于一段文字

Question

以下是组件的HTL文件中的一段代码：

<p id="info" data-sly-use.info="info-text.js">
    ${info.text}
</p>

这是info-text.js

use(function () {

    // TODO: change currentStyle to wcm.currentStyle

    var CONST = {
        PROP_INFO_TEXT: "infoText",
        PROP_DEFAULT_TEXT: "Enter information text here"
    }

    var info = {};

    // The actual title content
    info.text = granite.resource.properties[CONST.PROP_INFO_TEXT]
        || CONST.PROP_DEFAULT_TEXT


    return info;
});

PROP_DEFAULT_TEXT是在尚未创作infoText属性时显示在页面上的默认文本。我希望以某种方式为此默认文本“在此处输入信息文本”提供样式。我尝试使用

PROP_DEFAULT_TEXT: "<p style='default-text'>Enter information text here</p>"

但在页面上它看起来像下面的简单文字：

我不确定我是否使用HTL Context来使其工作，我尝试了一些事情，但它不起作用。所以，我不知道到底应该做些什么才能让它发挥作用。

提前致谢

Answer 1

First style="default-text" is not correct CSS, please use correct CSS rules with style attribute.

Second, when trying to render HTML via HTL expression, you must set the display context to html:

${info.text @context='html'}

Note: use github.com/Adobe-Marketing-Cloud/aem-htl-repl for quick HTL testing.