{{#if hasSend}}
  {{#if hasBlock}}
    {{#component send id=wormholeId class=(concat wormholeClass " liquid-wormhole-element")}}
      {{yield}}
    {{/component}}
  {{else}}
    {{component send id=wormholeId class=(concat wormholeClass " liquid-wormhole-element")}}
  {{/if}}
{{else}}
  <div id={{wormholeId}} class="{{wormholeClass}} liquid-wormhole-element">
    {{yield}}
  </div>
{{/if}}

{{#if hasSend}}
  {{#if hasBlock}}
    {{#component send id=wormholeId class=(concat wormholeClass " liquid-wormhole-element") as |details|}}
      {{yield details}}
    {{/component}}
  {{else}}
    {{component send id=wormholeId class=(concat wormholeClass " liquid-wormhole-element")}}
  {{/if}}
{{else}}
  <div id={{wormholeId}} class="{{wormholeClass}} liquid-wormhole-element">
    {{yield}}
  </div>
{{/if}}

Allow Composable Components with Liquid Wormhole
Allow Composable Components with Liquid Wormhole

By passing the top level component yielded data to liquid-wormhole's `yield` statement, it allows for creating composable components within the liquid-wormhole.

This allows for the following structure:

	// some-template.hbs
	{{#liquid-wormhole send="app-sidebar" class="app-sidebar" as |sidebar|}}

		{{#sidebar.header}}
			My Header Information
		{{/sidebar.header}}
		
		{{#sidebar.scrollable}}
			Scrollable Content
		{{/sidebar.scrollable}}

	{{/liquid-wormhole}}


	// components/templates/app-sidebar.hbs
	<div class="sidebar">
		{{yield (hash
			header=(component 'app-sidebar-header')
			scrollable=(component 'app-sidebar-scrollable')
		)}}
	</div>


	// components/templates/app-sidebar-header.hbs
	<div class="header">
		{{yield}}
	</div>

	// components/templates/app-sidebar-scrollable.hbs
	<div class="scrollable">
		{{yield}}
	</div>


	// The resulting HTML would approximately be as follows:
	<div class="sidebar">
			<div class="header">
				My Header Information
			</div>
			<div class="scrollable">
				Scrollable Content
			</div>
	</div>