Cannot override "signin-form" component

Support
#1

Hi,

I’ve overridden multiple components (and component sections) with success, but can’t get it to work with the “signin-form” component. I managed to override both section simultaneously…

    <signin section="top">
        <div class="root">
            <p>Hello</p>
            </div>
    </signin>
    <signin section="bottom">
        <div class="root">
            <p>Hello</p>
        </div>
    </signin>

…but what confuses me is the component having nested “overridable” tags:

        <overridable name="signin">
            <overridable name="signin" section="top"></overridable>
            <overridable name="signin" section="bottom"></overridable>
        </overridable>

I can override both the “top” and “bottom” sections, but the following does not work:

    <signin section="top">
        <div class="root">
            <p>top section override</p>
        </div>
    </signin>
    <signin>
        <div class="root">
            <p>main section override (no section attr specified)</p>
        </div>
    </signin>
    <signin section="bottom">
        <div class="root">
            <p>bottom section override</p>
        </div>
    </signin>

Nor does nesting them work:


    <signin>
        <div class="root">
            <p>main section override (no section attr specified)</p>
            <signin section="top">
                    <p>top section override</p>
            </signin>
            <signin section="bottom">
                    <p>bottom section override</p>
            </signin>
        </div>
    </signin>

I’ve played around trying many combinations without success.
If anyone could try to override the entire component for the sake of demonstration, that would be awesome.

Thanks!

#2

Here are the docs: