search

patternfly / patternfly-elements

PatternFly Elements. A set of community-created web components based on PatternFly design.
https://patternflyelements.org/
MIT License
376 stars 89 forks source link

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

Open kylebuch8 opened 4 years ago

kylebuch8 commented 4 years ago

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.

Screen Shot 2019-10-25 at 1 21 32 PM

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.

Screen Shot 2019-10-25 at 1 23 20 PM
grandemayta commented 4 years ago

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: carbon (4)

` 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 commented 3 years ago

@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 commented 2 years ago

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