injecting ViewSlot removes Container

[joelcoxokc]

This is a very interesting bug, so read closely to see what is happening.

given two customElements

<outer-element> and <inner-element>

Here is the class Implementations

export class OuterElement {}

@inject(ViewSlot)
export class InnerElement {}

Notice how the InnerElement has ViewSlot Injected.

When the view Slot is injected... If the inner-element is nested as a direct child inside the outer-element, it will loose it's container

For Example

<outer-element>
    <inner-element>
         <p>I am the inner Elements Content</p>
    </inner-element>
</outer-element>

The previous HTML when previewed in the DOM will produce the following.

<outer-element>

         <p>I am the inner Elements Content</p>

</outer-element>

If We simply wrap the inner-element in any NON CustomElement tag, then the container Remains.

For Example

<outer-element>
    <div>
        <inner-element>
             <p>I am the inner Elements Content</p>
        </inner-element>
    </div>
</outer-element>

The previous HTML when previewed in the DOM will produce the following

<outer-element>
    <div>
        <inner-element>
             <p>I am the inner Elements Content</p>
        </inner-element>
    </div>
</outer-element>

This same issue exists with the router-view.

If you place the router-view as a direct child to a customElement, it will loose it's container.

There is something happening when ViewSlot get's injected, and when the Elements parent containerNode is a customElement.