Handmade reusable HTML component | conflit with Thymeleaf syntax - html

Question

I am developing a reusable HTML component following this guide.
I have tested the guide with some sample code from bootstrap and it worked properly.
Now I am trying to use it for my navbar, which uses Thymeleaf syntax and I think it is giving conflicts due to the fact that both use single quotes.
Here is what I mean:
class Header extends HTMLElement {
connectedCallback() {
this.innerHTML = ` ***a single quote to open ***
<nav>
{*Header code goes here *}
</nav>
`; *** a single quote to close
}
}
Some code from my navbar, where in the srcset and src attribute single quotes are used:
<nav class="navbar navbar-expand-lg">
<div class="container">
<span class="navbar-brand">
<a href="/" class="navbar-brand">
<img
th:attr="srcset=|
#{${cloudinaryBaseUrl} + ${cloudinaryTransfCommon} + 'w_256/XXX.jpg'} 256w,
#{${cloudinaryBaseUrl} + ${cloudinaryTransfCommon} + 'w_1280//XXX.jpg'} 1280w|"
th:src="#{${cloudinaryBaseUrl} + ${cloudinaryTransfCommon} + 'w_auto' + '/XXX.jpg'}" class="img-fluid rounded-circle" width="70" alt="logo"
/>
</a>
</span>
If my intuition about the problem is correct, how can I overcome it?
===========================================================
UPDATE: I have tried isolating the problem, and found out that this line works:
th:src="#{https://theUrl}"
But this one doesn't:
th:src="#{${cloudinaryBaseUrl} + ${cloudinaryTransfCommon} + 'w_auto' + '/XXX.jpg'}"
So I believe the single quotes may be indeed the problem

Answer 1

There are a few different things happening here - but the bottom line is: The reason it is not working as expected is because of the way the code mixes Thymeleaf variables with JavaScript code.
Simple HTML Example
Consider this very simple piece of Thymeleaf:
<div th:text="${cloudinaryBaseUrl} + 'hello'"></div>
And assume that the value we pass to the Thymeleaf renderer for cloudinaryBaseUrl is /foo/bar/baz/.
If we place this in the HTML body, then the result will be the following HTML:
<div>/foo/bar/baz/hello</div>
So far, so good.
Adding JavaScript to the Mix
But in your case, you are embedding your HTML inside a JavaScript script - it's no longer a piece of HTML that will be rendered by Thymeleaf (on the server!). Now it is a string of text that will be processed by JavaScript (in the browser!), long after Thymeleaf has finished its work.
You have this:
<script>
class Header extends HTMLElement {
connectedCallback() {
this.innerHTML = `
<div th:text="${cloudinaryBaseUrl} + 'hello'"></div>
`;
}
};
customElements.define('main-header', Header);
</script>
The text inside the backticks is a JavaScript template literal - which just happens to also use ${...} for inserting values into text - but completely unrelated to Thymeleaf's ${...} syntax.
This will fail.
JavaScript will not be able to substitute any correct value into ${cloudinaryBaseUrl}. You may get something rendered - or you may get a JS error. Depends on the specific template literal being used.
Passing Thymeleaf Variables to JavaScript
If you want to pass Thymeleaf variables to JavaScript, you can do it like this:
<script th:inline="javascript">
var baseUrl = [[${cloudinaryBaseUrl}]];
class Header extends HTMLElement {
connectedCallback() {
this.innerHTML = `
<div>${baseUrl}hello</div>
`;
}
};
customElements.define('main-header', Header);
</script>
Note the th:inline="javascript" added to the script tag, and the use of [[...]].
By the time it reaches the browser, Thymeleaf has updated the JavaScript code to be this:
var baseUrl = '/foo/bar/baz/';
...
So, now the JS will generate this HTML:
<main-header>
<div>/foo/bar/baz/hello</div>
</main-header>
A Better Way - Use Thymeleaf Fragments
If you are doing this as an exercise, then this is how you can combine your JavaScript template fragments with Thymeleaf variables.
But Thymeleaf has support for fragments built into the Thymeleaf language. So, there is no real need for any of that JavaScript.
Take a look here: Template Layouts.
This does exactly the same thing as your JavaScript approach - but with full Thymeleaf support and no need to pass variables to JavaScript.