Loading custom components dynamically after events?

Hi, is it possible to load custom components after triggering some events?

For example, if I have an accordion on my page, can I load dynamically its content after accordion:opened event?
Something like:

import customComponents from 'path/to/customComponents.f7.html';


$$('body').undelegate('accordion:opened').delegate('.accordion-item', 'accordion:opened', function(){
 // Load my customComponents  inside the accordion

It would be very convenient to manage the loading of the page in this way, instead of doing the usual $('element').append(my_html)