Thymeleaf into <style>< /style>

7
votes

I'm using Polymer with Thymeleaf and I want to set a background image in paper-scroll-header-panel element when it's uncondensed. So, I'm trying this:

paper-scroll-header-panel{
--paper-scroll-header-panel-full-header: {
    background-image: url("+ @{(${session.user.coverImagePath})} + ");        
  };
}

But Thymeleaf is not rendering this code, when I access this template I get the code as it is. So, how can I set this property with Thymeleaf?

1
csspolymerthymeleaf
Is this code inside a <style> tag? - irpbc

1 Answers

16
votes

You have to explicitly tell Thymeleaf to look for expressions in text with th:inline attribute, and than surround the expression with double square brackets.

<style th:inline="text">
    paper-scroll-header-panel{
       --paper-scroll-header-panel-full-header: {
          background-image: url([[@{(${session.user.coverImagePath})}]]);        
       };
    }
</style>

The authors of Thymeleaf have chosen this scheme for performance reasons, because the Thymeleaf's template parsing and processing is very different compared to JSP or Facelets.