[fix] pfe-card: template does not update if light DOM changes

[kylebuch8]

Scenario

If we have a basic card that is just using the default slot. Things work great.

<pfe-card>
  Card body copy
</pfe-card>

However, if a header or footer is dynamically added to the pfe-card, the template does not update.

I added the header and footer with setTimeout after the card has already rendered. You can see the issue on a page here: https://codesandbox.io/s/pfe-card-dynamic-header-footer-dpgxb

Developer Notes

We already have a mutation observer set up in the connectedCallback that's watching the childList. Then in the constructor, we have the callback for the mutation observer. I think if we just called this.render() at the end of the callback, things will work the way we want.

[castastrophe]

+1 and let's document this approach because most components will need this

[bennypowers]

Is this still relevant in 2.0? https://patternflyelements.org/components/card/demo/