How to dynamically add fragment at client end about tailor

[stevoPerisic]

This is not a feature of Tailor since it is supposed to run on the server. You would be best suited to load the dynamic piece in as a 'hidden' element in the DOM and than show/hide on-demand.

[vigneshshanmugam]

As @stevoPerisic mentioned, It is not possible for Tailor to load child apps on user click with the way you are expecting. But you can do another trick to do in this way,

Set up a new route /child1 and create corresponding template for the same child.html which would look like this

<fragment src="header.live.com" id="header"/>

On user click you can simply query the endpoint /child and insert in to the HTML document.

cons response = await fetch('/child')
document.querSelector('xxx').innerHTML= response.text()

Tailor supports partial rendering which would spit only the child fragment html without any pipe logic or script. Check this test to learn more https://github.com/zalando/tailor/blob/master/tests/process-template.js#L50