Using pi-slot

The pi-slot component introduces a micro frontend independent rendering slot. It will automatically look into all currently loaded micro frontends - trying to locate exposed components by the given name attribute. All found components will be rendered inside the pi-slot.

Consider the following HTML:

<div class="d-flex p-2 justify-content-center">
  <pi-slot name="counter"></pi-slot>
</div>

Inside this area all found components with the name counter will be rendered. Let's say we only found one. The resulting HTML would be:

<div class="d-flex p-2 justify-content-center">
  <pi-slot name="counter">
    <pi-component cid="12356"></pi-component>
  </pi-slot>
</div>

At this point the pi-component would take over; except that it does not need to resolve any micro frontend. As the cid attribute is set it can directly render the referenced component.

What if the pi-slot found multiple components? Let's say we found three. The resulting HTML could look like this:

<div class="d-flex p-2 justify-content-center">
  <pi-slot name="counter">
    <pi-component cid="12356"></pi-component>
    <pi-component cid="12357"></pi-component>
    <pi-component cid="12358"></pi-component>
  </pi-slot>
</div>

Maybe this is exactly what we want - maybe not. If not, we might be interested in actually containing these elements in another structure.

By using a <template> element together with the item-template-id attribute we can wrap each component in another structure:

<div class="d-flex p-2 justify-content-center">
  <pi-slot name="counter" item-template-id="my-template"></pi-slot>
</div>
<template id="my-template">
  <div class="some-class">
    <slot></slot>
  </div>
</template>

The resulting HTML is:

<div class="d-flex p-2 justify-content-center">
  <pi-slot name="counter" item-template-id="my-template">
    <div class="some-class">
        <pi-component cid="12356"></pi-component>
    </div>
    <div class="some-class">
        <pi-component cid="12357"></pi-component>
    </div>
    <div class="some-class">
        <pi-component cid="12358"></pi-component>
    </div>
  </pi-slot>
</div>
<template id="my-template">
  <div class="some-class">
    <slot></slot>
  </div>
</template>