[ionic-v4] shadow-dom

Ionic Framework
3

Thank for your reply and your blog is very helpful.
I found my solution to this problem

I create a directive and write my custom CSS to shadowRoot.

import { Directive, ElementRef, Input, OnChanges } from '@angular/core';
@Directive({
  selector: '[appShadowCss]'
})
export class ShadowCssDirective implements OnChanges {
  @Input() shadowCustomCss: string;

  ngOnChanges(): void {
    const shadow = this.el.nativeElement.shadowRoot || this.el.nativeElement.attachShadow({ mode: 'open' });
    if (shadow) {
      let innerHTML = '';
      innerHTML += '<style>';
      innerHTML += this.shadowCustomCss;
      innerHTML += '</style>';
      shadow.innerHTML += innerHTML;
    }
  }
  constructor(private el: ElementRef) {

  }

}


<ion-button expand="block" fill="outline"  appShadowCss shadowCustomCss='.button-inner{white-space:normal;}'>
             Edit your phone number.
</ion-button>

I know It is a very bad idea to do this in every button.
Do you know how to disable shadow root in ionic?

3 Likes