title: Handmade reusable HTML component | conflit with Thymeleaf syntax
body: <p>I am developing a reusable HTML component following <a href="https://www.freecodecamp.org/news/how-to-build-reusable-html-components-without-component-based-frameworks/" rel="nofollow noreferrer">this</a> guide.</p>
  <p>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.</p>
  <p>Here is what I mean:</p>
  <pre><code>class Header extends HTMLElement {
    connectedCallback() {
      this.innerHTML = ` ***a single quote to open ***
        &lt;nav&gt;            
          {*Header code goes here *}         
        &lt;/nav&gt;
      `; *** a single quote to close
    }
  }
  </code></pre>
  <p>Some code from my navbar, where in the srcset and src attribute single quotes are used:</p>
  <pre class="lang-html prettyprint-override"><code> &lt;nav class=&quot;navbar navbar-expand-lg&quot;&gt;
              &lt;div class=&quot;container&quot;&gt;
                  &lt;span class=&quot;navbar-brand&quot;&gt;
                    &lt;a href=&quot;/&quot; class=&quot;navbar-brand&quot;&gt;
                        &lt;img
                          th:attr=&quot;srcset=|
                              @{${cloudinaryBaseUrl} + ${cloudinaryTransfCommon} + 'w_256/XXX.jpg'} 256w,
                              @{${cloudinaryBaseUrl} + ${cloudinaryTransfCommon} + 'w_1280//XXX.jpg'} 1280w|&quot;
                          th:src=&quot;@{${cloudinaryBaseUrl} + ${cloudinaryTransfCommon} + 'w_auto' + '/XXX.jpg'}&quot; class=&quot;img-fluid rounded-circle&quot; width=&quot;70&quot; alt=&quot;logo&quot;
                        /&gt;
                    &lt;/a&gt;
                  &lt;/span&gt;
  </code></pre>
  <p>If my intuition about the problem is correct, how can I overcome it?</p>
  <p>===========================================================</p>
  <p><strong>UPDATE</strong>: I have tried isolating the problem, and found out that this line works:</p>
  <pre><code>th:src=&quot;@{https://theUrl}&quot;
  </code></pre>
  <p>But this one doesn't:</p>
  <pre><code>th:src=&quot;@{${cloudinaryBaseUrl} + ${cloudinaryTransfCommon} + 'w_auto' + '/XXX.jpg'}&quot;
  </code></pre>
  <p>So I believe the single quotes may be indeed the problem</p>