When I'm loading the ads instantly (first calling googletag.defineSlot(...), and then loading the ad with googletag.display(...)), everything works as expected.
Now, since this is a web app, I need to load the ads on-demand. So, when I load the ad delayed (the ad code is first in a <template> tag and only rendered into the dom when needed), they don't output any errors, but they stay empty. So I'm guessing it is not meant to be used like that.
Is there an official way to load ads delayed? Because I have 3 different ad units from which I only need to display one in regards of the current available space (device orientation, column layout).
In order to control ads loading you can use disableInitialLoad() :
Disables requests for ads on page load, but allows ads to be requested with a PubAdsService.refresh call. This should be set prior to enabling the service. Async mode must be used; otherwise it will be impossible to request ads using refresh.
With this method, you can call a specific ad slot when you want, by using the refresh() fonction.
There is a dedicated guide on the official documentation about its use : see here for full working demo.
Last but not least : keep in mind that as soon as you define a tag, you can not anymore move the attached DOM node within the DOM : it will render empty ad slots. Details here.