Element blocks razor embedded code does not work on pages after adding Html.RequiredClientResources("Header")

Hi guys,

Trying to customize FormContainerBlock, made some changes in FormContainerBlock.cshtml under ElementBlocks/Components/FormContainerBlock.

But I found was that none of the embedded code works in this file unless commented Html.RequiredClientResources("Header").

For instance, ViewBag.CurrentStepIndex never changes after switch steps. 

And specifically, take this line as an example:

<div class="Form__NavigationBar__ProgressBar--Progress" style="width:@progressWidth; " data-f-navigation-progress></div>

Looks like the width was specified by @progressWidth on the page. But actually it was setup by _navigationBarUpdate in EpiServerForms.js

$(".Form__NavigationBar__ProgressBar--Progress, [data-f-navigation-progress]", $navbar).css({
                    width: 100 * currentDisplayStepIndex / currentDisplayStepCount + "%"
                });

So it looks like there are two places for controlling the elements. 

Then if I commented the line in _Layout.cshtml, Html.RequiredClientResources("Header"). The code on the page will work but missed all of the css.

If I still want Html.RequiredClientResources("Header") and also need to change the embedded code for the element container. Could someone elaborate what is the correct way of doing customization of form container?

Thanks in advance.