CODEWITHSUNDEEP
htmlangulartypescriptsassshadow-dom
MarkMark
MarkMark

Reputation: 184

Angular styles not applying when insert component inside shadow-root

In my app, I use the widget which displays in shadow-root, and inside it has a div with an id where I need to insert my component. Like:

<widget>
  #shadow-root (open)
    ....
    <div id='container'> // need to insert component here // </div>
    ...
</widget>

For now, in test.html I have simple

<div #test>It works!</div>

In widget settings, I could get this <div id='container'></div> as parameter and pass it to my component, so test.ts looks like

@Component({
  selector: 'test',
  templateUrl: './test.component.html',
  styleUrls: ['./test.component.less'],
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class Test implements OnInit, AfterViewInit {
  @Input() container: HTMLDivElement,
  @ViewChild('test', { static: true }) test: ElementRef;

  ngAfterViewInit(): void {
    const testElement = this.test.nativeElement;
    container.appendChild(testElement);
  }
}

The problem is that when it inserts to the shadow-root it doesn't see the styles from test.component.less. I tried :host{} :host ::ng-deep {} and it still doesn't work.

So my question is - is there a way to apply styles from test.component.less to my .html file, while it's inside shadow-root?

Would be really grateful for any help!

Upvotes: 1

Views: 1047

Answers (1)

HermanW
HermanW

Reputation: 19

Maybe you need set view encapsulation to none

@Component({
  selector: 'test',
  templateUrl: './test.component.html',
  styleUrls: ['./test.component.less'],
  changeDetection: ChangeDetectionStrategy.OnPush,
  encapsulation: ViewEncapsulation.None
})

hope helped you.

Upvotes: 1

Related Questions