Adjacent slots render content incorrectly

[sorvell]

See https://jsbin.com/japupemidu/edit?html,output.

[sorvell]

This issue can occur when the parser generates children after a shadowRoot has been created. This typically only happens when a shadowRoot is created by a custom element that's defined before the parser hits the element in question. It can easily be addressed by moving the element definition after the HTML containing the element as shown here: https://jsbin.com/peyudoz/edit?html,output.

It's not clear how to address this issue without a negative impact on performance. We could defer all shadowRoot render until after DOMContentLoaded. This would avoid the problem but it is pretty drastic and postpones a lot of work that could otherwise happen. I don't think there's a good platform signal for "the parser has finished creating children for this element."

In the absence of that, I'm inclined to suggest working around this by defining elements after HTML that contains any of the defined elements as this is a good general practice anyway.