="foo + '-nested'">
                    <div>
                        <span x-text="foo"></span>
                    </div>
                </the-outer>
            </div>

            <template x-element="the-outer" x-props="{ foo: 'fiiii' }">
                <div class="border-b-8" x-data="{ hey: 'there' }" x-provide="hey">
                    <h1 x-text="foo"></h1>

                    <the-inner :foo="foo + '-nested-deep'">
                        <span x-text="foo"></span>
                    </the-inn