Drupal 8 CAPTCHA: How to customize the CAPTCHA markup?

So I think I made some progress with this...

The first thing I did was add change the template the login form was using. I did this by using the HOOK_theme() function to assign to a $hooks['user_login_form'] array the render_element and template values. This allowed me to override the default login form template being used (i.e. - it allowed me to use a user-login-form.html.twig file).

The second thing I did was break out the Twig variables to have better control in the user-login-form.html.twig file (i.e. - instead of printing a single {{form}} variable, I instead made individual (more granular) prints for {{form.name}} (for the username field, {{form.pass}} (for the password), along with {{form.form_build_id}} and {{form.form_id}}, etc. Once I got to a point where I was ready to start printing out the CAPTCHA elements themselves, I decided to hard code a different container before using the individual CAPTCHA Twig variables to print their fields.

Since the whole point of this was to have the ability to break everything out of the "details" element / container, what I did was code a div into my Twig template file and inside that, print the 2 hidden inputs (the SID and the token) and directly after that, print the {{form.captcha.captcha_widgets}} variable so that I'd have both the image and the input to enter the code into.

Here's the code I've written into the Twig template file I made so far:

{{ form.name }}
{{ form.pass }}
{{ form.form_build_id }}
{{ form.form_id }}

<div id="captcha" class="captcha js-form-wrapper form-wrapper details-wrapper" aria-controls="captcha">
	<input data-drupal-selector="edit-captcha-sid" type="hidden" name="captcha_sid" value="{{form.captcha.captcha_sid['#value']}}">
	<input data-drupal-selector="edit-captcha-token" type="hidden" name="captcha_token" value="{{form.captcha.captcha_token['#value']}}">

	{{form.captcha.captcha_widgets}}
</div>

<div class="details-description">{{form.captcha['#description']}}</div>

{{ form.actions }}

Everything is working as I need it to with the exception of 1 problem: the initial page load results in the CAPTCHA image showing what appears to be crunched characters that would normally be where the correct characters would show up. What I see is almost as if the image itself is "crunched" and trying to show more crunched characters than it should and I suspect it's due to something not being correctly initialized during each page load. What's interesting is that when I click on the "Get new captcha!" link, a new reloaded CAPTCHA image is correctly rendered / displayed.

Would anyone have any idea what would be causing this and how to debug it? One thing I've noticed in Firefox's Developer Tools is that the JavaScript "naturalWidth" DOM value of the respective image element appears to be greatly higher than the value I see without overriding the template. This tells me that something isn't being set at the initial loading of the page but gets corrected upon clicking the refresh image link. Just not sure how to correct it prior to the page being rendered...

I guess this just can't be accomplished.

I have the following in my "user-login-form.html.twig" file:

{{form.name}}
{{form.pass}}
{{form.form_build_id}}
{{form.form_id}}

<div id="captcha" class="captcha js-form-wrapper form-wrapper details-wrapper" aria-controls="captcha" >
	<input data-drupal-selector="edit-captcha-sid" type="hidden" name="captcha_sid" value="{{form.captcha.captcha_sid['#value']}}">
	<input data-drupal-selector="edit-captcha-token" type="hidden" name="captcha_token" value="{{form.captcha.captcha_token['#value']}}">

	<div id="captcha_image">xxx
	{{form.captcha.captcha_widgets}}
	</div>
</div>


<div class="details-description">{{form.captcha['#description']}}</div>

{{form.actions}}

{#{form.captcha}#}

As you can see, I've busted out of the main CAPTCHA form variable the individual components to have better markup control but the image still looks "crunched" (it has wayyyy too many characters vs. the confined space it's using within the HTML). The super strange thing is that if I uncomment the form.captcha variable, the image corrects itself (after a refresh, of course). If I leave it commented-out, the image looks crunched upon page load but clicking the "Get new captcha!" link fixes it.

So I guess there's something that printing the {{form.captcha}} does but I can't figure out what it is. I think it either adds something to the markup or else does something with Drupal that tells it to process something before final rendering.

Thoughts?

Okay, I finally got it to work using the following approach:

1.) Inside your < your theme theme >.theme file, add the following code:

function <strong>< your theme name ></strong>_theme(&$existing, $type, $theme, $path) {
	$hooks = array();
	$hooks['user_login_form'] = array(         
		'render element' => 'form',
		'template' => 'user-login-form',
	);  
	return $hooks;
}

2.) Create '/themes/custom/< your theme name >/templates/user-login-form.html.twig and structure your markup using following Twig variables:

{{form.form_build_id}}
{{form.form_id}}
{{form.captcha.captcha_sid}}
{{form.captcha.captcha_token}}
{{form.name}}
{{form.pass}}
{{form.captcha.captcha_widgets.captcha_response|without('#title','#description')}}
{{form.captcha.captcha_widgets.captcha_image}}</div>
{{form.captcha.captcha_widgets.captcha_refresh}}

3.) In the same file, be sure to add the following or else the CAPTCHA image won't display correctly (anyone know why this is? I think it has something to do with either form.captcha['#captcha_info'] or form.captcha['#pre_render'] because if these aren't used, the image breaks and somehow, adding this last line ensures that whatever CAPTCHA needs, is successfully loaded):

{{ 
form.captcha|without('#type','#captcha_type','#weight','#input','#process','#default_value','#captcha_admin_mode','#captcha_validate','#value_callback','#defaults_loaded','#tree','#parents','#array_parents','#processed','#required','#attributes','#title_display','#description_display','#errors','#id','#name','#value','#attached','captcha_sid','captcha_token','captcha_widgets','#element_validate','#theme','#sorted') 
}}

If I can just figure out how to include / process whatever #captcha_info and or #pre_render do, this customization would be okay. It's just that last part (#3) that makes this a bit kludgy, despite appearing to work. I hope this helps someone because there is absolutely zero documentation on how to do this now with Drupal 8's changes...