[bug] pfe-band: Does not work with frameworks

[kylebuch8]

I've tested this component with Angular, React, and Vue and I get the same experience with all three frameworks. The band initially renders with just the default slot content.

Even though my test is using the header, aside, and footer slots, those areas do not render. However, if I call the render method on pfe-band after the page loads, those slots become visible.

[grandemayta]

Hi, I also have this issue with Angular. Angular remove at runtime all the attributes and this behaviour create random issues with Web Components. I fixed for the moment with the following code:

` constructor() { super(PfeBand, { type: PfeBand.PfeType }); this._init = this._init.bind(this); this._observer = new MutationObserver(this._init); }

connectedCallback() { super.connectedCallback(); if (this.children.length) { this.render(); this._init(); } this._observer.observe(this, { childList: true }); }

_init() { // Initialize the background image attachment if (this.imageSrc) { this._imgSrcChanged("pfe-img-src", "", this.imageSrc); } } `

[castastrophe]

@kylebuch8 Is this still an issue? It looks like tests are passing for React and Vue. I suspect Angular is still a problem though.

[bennypowers]

Is this still relevant with @patternfly/pfe-band@^2.0.0-next-0?