Can I call sightly within Javascript?

Hi 

Agreeing with Lee, we can call Sightly a.k.a HTL (HTML Template Language) from JavaScript.

For style and script contexts, it is mandatory to set a context. If the context isn't set, the expression shouldn't output anything. 

    <a href="#whatever" onclick="${myFunctionName @ context='scriptToken'}()">Link</a>
    <script>var ${myVarName @ context="scriptToken"}="Bar";</script>
    <script>var bar='${someText @ context="scriptString"}';</script>

    <!--/* Styles */-->
    <a href="#whatever" style="color: ${colorName @ context='styleToken'};">Link</a>
    <style>
        a.${className @ context="styleToken"} {
            font-family: '${fontFamily @ context="styleString"}', sans-serif;
            color: #${colorHashValue @ context="styleToken"};
            margin-${side @ context="styleToken"}: 1em; /* E.g. for bi-directional text */
        }

    </style>

Context Type

${properties.jcr:title @ context='html'}          <!--/* Use this in case you want to output HTML - Removes markup that may contain XSS risks */-->
${properties.jcr:title @ context='text'}          <!--/* Use this for simple HTML content - Encodes all HTML */-->
${properties.jcr:title @ context='elementName'}   <!--/* Allows only element names that are white-listed, outputs 'div' otherwise */-->
${properties.jcr:title @ context='attributeName'} <!--/* Outputs nothing if the value doesn't correspond to the HTML attribute name syntax - doesn't allow 'style' and 'on*' attributes */-->
${properties.jcr:title @ context='attribute'}     <!--/* Applies HTML attribute escaping */-->
${properties.jcr:title @ context='uri'}           <!--/* Outputs nothing if the value contains XSS risks */-->
${properties.jcr:title @ context='scriptToken'}   <!--/* Outputs nothing if the value doesn't correspond to the JavaScript token syntax */-->
${properties.jcr:title @ context='scriptString'}  <!--/* Applies JavaScript string escaping */-->
${properties.jcr:title @ context='scriptComment'} <!--/* Context for Javascript block comments. Outputs nothing if value is trying to break out of the comment context */-->
${properties.jcr:title @ context='scriptRegExp'}  <!--/* Applies JavaScript regular expression escaping */-->
${properties.jcr:title @ context='styleToken'}    <!--/* Outputs nothing if the value doesn't correspond to the CSS token syntax */-->
${properties.jcr:title @ context='styleString'}   <!--/* Applies CSS string escaping */-->
${properties.jcr:title @ context='styleComment'}  <!--/* Context for CSS comments. Outputs nothing if value is trying to break out of the comment context */-->
${properties.jcr:title @ context='comment'}       <!--/* Applies HTML comment escaping */-->
${properties.jcr:title @ context='number'}        <!--/* Outputs zero if the value is not a number */-->
${properties.jcr:title @ context='unsafe'}        <!--/* Use this at your own risk, this disables XSS protection completely */-->

Reference Articles:- 

Link:- https://github.com/Netcentric/aem-sightly-style-guide#3-expression-language

Link:- https://github.com/Adobe-Marketing-Cloud/sightly-spec/blob/master/SPECIFICATION.md#113-context-sensitive

I hope this would help you.

Thanks and Regards

Kautuk Sahni