I trying to add a custom template @ checkout between form customer login and shipping address inside div id=”checkout-step-shipping” there are 2 forms : 
I’ve tried a few thing like ‘before-form’ etc.. I’ve manage to add before and after everything following this :https://devdocs.magento.com/guides/v2.2/howdoi/checkout/checkout_new_step.html But Not able to add in between! Here is my xml :
...<referenceBlock name="checkout.root"> <arguments> <argument name="jsLayout" xsi:type="array"> <item name="components" xsi:type="array"> <item name="checkout" xsi:type="array"> <item name="children" xsi:type="array"> <item name="steps" xsi:type="array"> <item name="children" xsi:type="array"> <item name="shipping-step" xsi:type="array"> <item name="children" xsi:type="array"> <item name="shippingAddress" xsi:type="array"> <item name="children" xsi:type="array"> <item name="MYCUSTOMHTML" xsi:type="array"> <item name="component" xsi:type="string">Magento_Checkout/js/view/shipping-address/MYCUSTOMCOMPONENT</item> <item name="sortOrder" xsi:type="string">1</item> </item> </item> </item> </item> </item> </item> </item> </item> </item> </item> </argument> </arguments> </referenceBlock>... Here is my component :
define( [ 'uiComponent', 'jquery', 'Magento_Checkout/js/model/step-navigator', 'Magento_Checkout/js/model/quote', 'Magento_Ui/js/modal/alert', 'Magento_Ui/js/modal/modal', 'ko' ], function (Component, $ , stepNavigator, quote, alert, modal, ko) { 'use strict'; return Component.extend({ defaults: { template: 'Magento_Checkout/shipping-address/MYCUSTOMCOMPONENT' }, initialize: function () { this._super(); console.log('LOADED!'); } }) } );
My html:
<div>TEST TEST TESTE</div> This works I console.log LOADED but the html does not gets added!
Does anyone have any idea I ma not sure why the html not showing up as the component loads! any help Appreciate thanks!
