diff --git a/projects/angular-editor-app/src/app/app-routing.module.ts b/projects/angular-editor-app/src/app/app-routing.module.ts
new file mode 100644
index 00000000..53113837
--- /dev/null
+++ b/projects/angular-editor-app/src/app/app-routing.module.ts
@@ -0,0 +1,21 @@
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+import { HomeComponent } from './home/home.component';
+import { ShadowDomComponent } from './shadow-dom/shadow-dom.component';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: HomeComponent
+  },
+  {
+    path: 'shadow-dom',
+    component: ShadowDomComponent
+  }
+];
+
+@NgModule({
+  imports: [RouterModule.forRoot(routes)],
+  exports: [RouterModule]
+})
+export class AppRoutingModule { }
diff --git a/projects/angular-editor-app/src/app/app.component.html b/projects/angular-editor-app/src/app/app.component.html
index 72931bb3..79be59ce 100644
--- a/projects/angular-editor-app/src/app/app.component.html
+++ b/projects/angular-editor-app/src/app/app.component.html
@@ -1,29 +1,2 @@
-<div class="container">
-  <h1>Angular Editor</h1>
-  <p><a href="https://github.com/kolkov/angular-editor">Get it here</a></p>
-
-  <label for="test_input">Test input </label>
-  <input id="test_input">
-  <br><br>
-  <angular-editor id="editor1" [(ngModel)]="htmlContent1" [config]="config1" (ngModelChange)="onChange($event)"
-                  (blur)="onBlur($event)">
-    <ng-template #customButtons let-executeCommandFn="executeCommandFn">
-      <ae-toolbar-set>
-        <ae-button iconClass="fa fa-html5" title="Angular editor logo" (buttonClick)="executeCommandFn('insertHtml', angularEditorLogo)"></ae-button>
-      </ae-toolbar-set>
-    </ng-template>
-  </angular-editor>
-  <p class="html">
-    HTML Output:  {{ htmlContent1 }}
-  </p>
-  <form [formGroup]="form">
-    <angular-editor autofocus="true" id="editor2" formControlName="signature" [config]="config2" (ngModelChange)="onChange2($event)"></angular-editor>
-  </form>
-  <p>
-    Form Value: {{ form.value.signature }}
-  </p>
-  <p>
-    Form Status: {{ form.status }}
-  </p>
-</div>
 
+<router-outlet></router-outlet>
diff --git a/projects/angular-editor-app/src/app/app.component.scss b/projects/angular-editor-app/src/app/app.component.scss
index e69de29b..6e634e3b 100644
--- a/projects/angular-editor-app/src/app/app.component.scss
+++ b/projects/angular-editor-app/src/app/app.component.scss
@@ -0,0 +1,6 @@
+:host {
+    display: block;
+    max-width: 720px;
+    margin-right: auto;
+    margin-left: auto;
+}
diff --git a/projects/angular-editor-app/src/app/app.component.ts b/projects/angular-editor-app/src/app/app.component.ts
index 28bf1cfb..fda5020c 100644
--- a/projects/angular-editor-app/src/app/app.component.ts
+++ b/projects/angular-editor-app/src/app/app.component.ts
@@ -1,8 +1,4 @@
 import { Component, OnInit } from '@angular/core';
-import { FormBuilder, FormGroup, Validators } from '@angular/forms';
-import { AngularEditorConfig } from 'angular-editor';
-
-const ANGULAR_EDITOR_LOGO_URL = 'https://raw.githubusercontent.com/kolkov/angular-editor/master/docs/angular-editor-logo.png?raw=true'
 
 @Component({
   selector: 'app-root',
@@ -10,96 +6,10 @@ const ANGULAR_EDITOR_LOGO_URL = 'https://raw.githubusercontent.com/kolkov/angula
   styleUrls: ['./app.component.scss']
 })
 export class AppComponent implements OnInit {
-  title = 'app';
-
-  form: FormGroup;
-
-  htmlContent1 = '';
-  htmlContent2 = '';
-  angularEditorLogo = `<img alt="angular editor logo" src="${ANGULAR_EDITOR_LOGO_URL}">`;
 
-  config1: AngularEditorConfig = {
-    editable: true,
-    spellcheck: true,
-    minHeight: '5rem',
-    maxHeight: '15rem',
-    placeholder: 'Enter text here...',
-    translate: 'no',
-    sanitize: false,
-    // toolbarPosition: 'top',
-    outline: true,
-    defaultFontName: 'Comic Sans MS',
-    defaultFontSize: '5',
-    // showToolbar: false,
-    defaultParagraphSeparator: 'p',
-    customClasses: [
-      {
-        name: 'quote',
-        class: 'quote',
-      },
-      {
-        name: 'redText',
-        class: 'redText'
-      },
-      {
-        name: 'titleText',
-        class: 'titleText',
-        tag: 'h1',
-      },
-    ],
-    toolbarHiddenButtons: [
-      ['bold', 'italic'],
-      ['fontSize']
-    ]
-  };
-
-  config2: AngularEditorConfig = {
-    editable: true,
-    spellcheck: true,
-    minHeight: '5rem',
-    maxHeight: '15rem',
-    placeholder: 'Enter text here...',
-    translate: 'no',
-    sanitize: true,
-    toolbarPosition: 'bottom',
-    defaultFontName: 'Comic Sans MS',
-    defaultFontSize: '5',
-    defaultParagraphSeparator: 'p',
-    customClasses: [
-      {
-        name: 'quote',
-        class: 'quote',
-      },
-      {
-        name: 'redText',
-        class: 'redText'
-      },
-      {
-        name: 'titleText',
-        class: 'titleText',
-        tag: 'h1',
-      },
-    ]
-  };
-
-  constructor(private formBuilder: FormBuilder) {}
+  constructor() {}
 
   ngOnInit() {
-    this.form = this.formBuilder.group({
-      signature: ['', Validators.required]
-    });
-    console.log(this.htmlContent1);
-  }
-
-  onChange(event) {
-    console.log('changed');
-  }
-
-  onBlur(event) {
-    console.log('blur ' + event);
-  }
-
-  onChange2(event) {
-    console.warn(this.form.value);
+    //
   }
 }
diff --git a/projects/angular-editor-app/src/app/app.module.ts b/projects/angular-editor-app/src/app/app.module.ts
index 65204404..b7583ec6 100644
--- a/projects/angular-editor-app/src/app/app.module.ts
+++ b/projects/angular-editor-app/src/app/app.module.ts
@@ -5,18 +5,28 @@ import { AppComponent } from './app.component';
 import {FormsModule, ReactiveFormsModule} from '@angular/forms';
 import {HttpClientModule} from '@angular/common/http';
 import {AngularEditorModule} from '../../../angular-editor/src/lib/angular-editor.module';
+import { AppRoutingModule } from './app-routing.module';
+import { ShadowDomComponent } from './shadow-dom/shadow-dom.component';
+import { HomeComponent } from './home/home.component';
+import { NavComponent } from './nav/nav.component';
+import { ContainerComponent } from './shadow-dom/container/container.component';
 
 
 @NgModule({
   declarations: [
-    AppComponent
+    AppComponent,
+    ShadowDomComponent,
+    HomeComponent,
+    NavComponent,
+    ContainerComponent
   ],
   imports: [
     BrowserModule,
     AngularEditorModule,
     HttpClientModule,
     FormsModule,
-    ReactiveFormsModule
+    ReactiveFormsModule,
+    AppRoutingModule
   ],
   providers: [],
   bootstrap: [AppComponent]
diff --git a/projects/angular-editor-app/src/app/home/home.component.html b/projects/angular-editor-app/src/app/home/home.component.html
new file mode 100644
index 00000000..5f63eaca
--- /dev/null
+++ b/projects/angular-editor-app/src/app/home/home.component.html
@@ -0,0 +1,32 @@
+<app-nav></app-nav>
+
+<div class="container">
+    <h1>Angular Editor</h1>
+    <p><a href="https://github.com/kolkov/angular-editor">Get it here</a></p>
+
+    <label for="test_input">Test input </label>
+    <input id="test_input">
+    <br><br>
+    <angular-editor id="editor1" [(ngModel)]="htmlContent1" [config]="config1" (ngModelChange)="onChange($event)"
+        (blur)="onBlur($event)">
+        <ng-template #customButtons let-executeCommandFn="executeCommandFn">
+            <ae-toolbar-set>
+                <ae-button iconClass="fa fa-html5" title="Angular editor logo"
+                    (buttonClick)="executeCommandFn('insertHtml', angularEditorLogo)"></ae-button>
+            </ae-toolbar-set>
+        </ng-template>
+    </angular-editor>
+    <p class="html">
+        HTML Output: {{ htmlContent1 }}
+    </p>
+    <form [formGroup]="form">
+        <angular-editor autofocus="true" id="editor2" formControlName="signature" [config]="config2"
+            (ngModelChange)="onChange2($event)"></angular-editor>
+    </form>
+    <p>
+        Form Value: {{ form.value.signature }}
+    </p>
+    <p>
+        Form Status: {{ form.status }}
+    </p>
+</div>
\ No newline at end of file
diff --git a/projects/angular-editor-app/src/app/home/home.component.scss b/projects/angular-editor-app/src/app/home/home.component.scss
new file mode 100644
index 00000000..e69de29b
diff --git a/projects/angular-editor-app/src/app/home/home.component.spec.ts b/projects/angular-editor-app/src/app/home/home.component.spec.ts
new file mode 100644
index 00000000..2c5a1726
--- /dev/null
+++ b/projects/angular-editor-app/src/app/home/home.component.spec.ts
@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { HomeComponent } from './home.component';
+
+describe('HomeComponent', () => {
+  let component: HomeComponent;
+  let fixture: ComponentFixture<HomeComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ HomeComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(HomeComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/projects/angular-editor-app/src/app/home/home.component.ts b/projects/angular-editor-app/src/app/home/home.component.ts
new file mode 100644
index 00000000..049782a7
--- /dev/null
+++ b/projects/angular-editor-app/src/app/home/home.component.ts
@@ -0,0 +1,105 @@
+import { Component, OnInit } from '@angular/core';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { AngularEditorConfig } from 'angular-editor/public-api';
+
+const ANGULAR_EDITOR_LOGO_URL = 'https://raw.githubusercontent.com/kolkov/angular-editor/master/docs/angular-editor-logo.png?raw=true'
+
+@Component({
+  selector: 'app-home',
+  templateUrl: './home.component.html',
+  styleUrls: ['./home.component.scss']
+})
+export class HomeComponent implements OnInit {
+  title = 'app';
+
+  form: FormGroup;
+
+  htmlContent1 = '';
+  htmlContent2 = '';
+  angularEditorLogo = `<img alt="angular editor logo" src="${ANGULAR_EDITOR_LOGO_URL}">`;
+
+  config1: AngularEditorConfig = {
+    editable: true,
+    spellcheck: true,
+    minHeight: '5rem',
+    maxHeight: '15rem',
+    placeholder: 'Enter text here...',
+    translate: 'no',
+    sanitize: false,
+    // toolbarPosition: 'top',
+    outline: true,
+    defaultFontName: 'Comic Sans MS',
+    defaultFontSize: '5',
+    // showToolbar: false,
+    defaultParagraphSeparator: 'p',
+    customClasses: [
+      {
+        name: 'quote',
+        class: 'quote',
+      },
+      {
+        name: 'redText',
+        class: 'redText'
+      },
+      {
+        name: 'titleText',
+        class: 'titleText',
+        tag: 'h1',
+      },
+    ],
+    toolbarHiddenButtons: [
+      ['bold', 'italic'],
+      ['fontSize']
+    ]
+  };
+
+  config2: AngularEditorConfig = {
+    editable: true,
+    spellcheck: true,
+    minHeight: '5rem',
+    maxHeight: '15rem',
+    placeholder: 'Enter text here...',
+    translate: 'no',
+    sanitize: true,
+    toolbarPosition: 'bottom',
+    defaultFontName: 'Comic Sans MS',
+    defaultFontSize: '5',
+    defaultParagraphSeparator: 'p',
+    customClasses: [
+      {
+        name: 'quote',
+        class: 'quote',
+      },
+      {
+        name: 'redText',
+        class: 'redText'
+      },
+      {
+        name: 'titleText',
+        class: 'titleText',
+        tag: 'h1',
+      },
+    ]
+  };
+
+  constructor(private formBuilder: FormBuilder) { }
+
+  ngOnInit() {
+    this.form = this.formBuilder.group({
+      signature: ['', Validators.required]
+    });
+    console.log(this.htmlContent1);
+  }
+
+  onChange(event) {
+    console.log('changed');
+  }
+
+  onBlur(event) {
+    console.log('blur ' + event);
+  }
+
+  onChange2(event) {
+    console.warn(this.form.value);
+  }
+}
diff --git a/projects/angular-editor-app/src/app/nav/nav.component.html b/projects/angular-editor-app/src/app/nav/nav.component.html
new file mode 100644
index 00000000..073475a8
--- /dev/null
+++ b/projects/angular-editor-app/src/app/nav/nav.component.html
@@ -0,0 +1,4 @@
+<ul>
+    <li><a [routerLink]="'/'">Home</a></li>
+    <li><a [routerLink]="'/shadow-dom'">Shadow Dom</a></li>
+</ul>
diff --git a/projects/angular-editor-app/src/app/nav/nav.component.scss b/projects/angular-editor-app/src/app/nav/nav.component.scss
new file mode 100644
index 00000000..e69de29b
diff --git a/projects/angular-editor-app/src/app/nav/nav.component.spec.ts b/projects/angular-editor-app/src/app/nav/nav.component.spec.ts
new file mode 100644
index 00000000..5d13772b
--- /dev/null
+++ b/projects/angular-editor-app/src/app/nav/nav.component.spec.ts
@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { NavComponent } from './nav.component';
+
+describe('NavComponent', () => {
+  let component: NavComponent;
+  let fixture: ComponentFixture<NavComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ NavComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(NavComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/projects/angular-editor-app/src/app/nav/nav.component.ts b/projects/angular-editor-app/src/app/nav/nav.component.ts
new file mode 100644
index 00000000..8fcdd846
--- /dev/null
+++ b/projects/angular-editor-app/src/app/nav/nav.component.ts
@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-nav',
+  templateUrl: './nav.component.html',
+  styleUrls: ['./nav.component.scss']
+})
+export class NavComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}
diff --git a/projects/angular-editor-app/src/app/shadow-dom/container/container.component.html b/projects/angular-editor-app/src/app/shadow-dom/container/container.component.html
new file mode 100644
index 00000000..98f5882f
--- /dev/null
+++ b/projects/angular-editor-app/src/app/shadow-dom/container/container.component.html
@@ -0,0 +1,25 @@
+<div class="container">
+    <h1>Angular Editor</h1>
+    <angular-editor id="editor1" [(ngModel)]="htmlContent1" [config]="config1" (ngModelChange)="onChange($event)"
+        (blur)="onBlur($event)">
+        <ng-template #customButtons let-executeCommandFn="executeCommandFn">
+            <ae-toolbar-set>
+                <ae-button iconClass="fa fa-html5" title="Angular editor logo"
+                    (buttonClick)="executeCommandFn('insertHtml', angularEditorLogo)"></ae-button>
+            </ae-toolbar-set>
+        </ng-template>
+    </angular-editor>
+    <p class="html">
+        HTML Output: {{ htmlContent1 }}
+    </p>
+    <form [formGroup]="form">
+        <angular-editor autofocus="true" id="editor2" formControlName="signature" [config]="config2"
+            (ngModelChange)="onChange2($event)"></angular-editor>
+    </form>
+    <p>
+        Form Value: {{ form.value.signature }}
+    </p>
+    <p>
+        Form Status: {{ form.status }}
+    </p>
+</div>
diff --git a/projects/angular-editor-app/src/app/shadow-dom/container/container.component.scss b/projects/angular-editor-app/src/app/shadow-dom/container/container.component.scss
new file mode 100644
index 00000000..e69de29b
diff --git a/projects/angular-editor-app/src/app/shadow-dom/container/container.component.spec.ts b/projects/angular-editor-app/src/app/shadow-dom/container/container.component.spec.ts
new file mode 100644
index 00000000..d44e3b1a
--- /dev/null
+++ b/projects/angular-editor-app/src/app/shadow-dom/container/container.component.spec.ts
@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ContainerComponent } from './container.component';
+
+describe('ContainerComponent', () => {
+  let component: ContainerComponent;
+  let fixture: ComponentFixture<ContainerComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ ContainerComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ContainerComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/projects/angular-editor-app/src/app/shadow-dom/container/container.component.ts b/projects/angular-editor-app/src/app/shadow-dom/container/container.component.ts
new file mode 100644
index 00000000..fd30e9c8
--- /dev/null
+++ b/projects/angular-editor-app/src/app/shadow-dom/container/container.component.ts
@@ -0,0 +1,106 @@
+import { Component, OnInit, ViewEncapsulation } from '@angular/core';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { AngularEditorConfig } from 'angular-editor/public-api';
+
+const ANGULAR_EDITOR_LOGO_URL = 'https://raw.githubusercontent.com/kolkov/angular-editor/master/docs/angular-editor-logo.png?raw=true'
+
+@Component({
+  selector: 'app-container',
+  templateUrl: './container.component.html',
+  styleUrls: ['./container.component.scss'],
+  encapsulation: ViewEncapsulation.ShadowDom
+})
+export class ContainerComponent implements OnInit {
+  title = 'app';
+
+  form: FormGroup;
+
+  htmlContent1 = '';
+  htmlContent2 = '';
+  angularEditorLogo = `<img alt="angular editor logo" src="${ANGULAR_EDITOR_LOGO_URL}">`;
+
+  config1: AngularEditorConfig = {
+    editable: true,
+    spellcheck: true,
+    minHeight: '5rem',
+    maxHeight: '15rem',
+    placeholder: 'Enter text here...',
+    translate: 'no',
+    sanitize: false,
+    // toolbarPosition: 'top',
+    outline: true,
+    defaultFontName: 'Comic Sans MS',
+    defaultFontSize: '5',
+    // showToolbar: false,
+    defaultParagraphSeparator: 'p',
+    customClasses: [
+      {
+        name: 'quote',
+        class: 'quote',
+      },
+      {
+        name: 'redText',
+        class: 'redText'
+      },
+      {
+        name: 'titleText',
+        class: 'titleText',
+        tag: 'h1',
+      },
+    ],
+    toolbarHiddenButtons: [
+      ['bold', 'italic'],
+      ['fontSize']
+    ]
+  };
+
+  config2: AngularEditorConfig = {
+    editable: true,
+    spellcheck: true,
+    minHeight: '5rem',
+    maxHeight: '15rem',
+    placeholder: 'Enter text here...',
+    translate: 'no',
+    sanitize: true,
+    toolbarPosition: 'bottom',
+    defaultFontName: 'Comic Sans MS',
+    defaultFontSize: '5',
+    defaultParagraphSeparator: 'p',
+    customClasses: [
+      {
+        name: 'quote',
+        class: 'quote',
+      },
+      {
+        name: 'redText',
+        class: 'redText'
+      },
+      {
+        name: 'titleText',
+        class: 'titleText',
+        tag: 'h1',
+      },
+    ]
+  };
+
+  constructor(private formBuilder: FormBuilder) { }
+
+  ngOnInit() {
+    this.form = this.formBuilder.group({
+      signature: ['', Validators.required]
+    });
+    console.log(this.htmlContent1);
+  }
+
+  onChange(event) {
+    console.log('changed');
+  }
+
+  onBlur(event) {
+    console.log('blur ' + event);
+  }
+
+  onChange2(event) {
+    console.warn(this.form.value);
+  }
+}
diff --git a/projects/angular-editor-app/src/app/shadow-dom/shadow-dom.component.html b/projects/angular-editor-app/src/app/shadow-dom/shadow-dom.component.html
new file mode 100644
index 00000000..b742a735
--- /dev/null
+++ b/projects/angular-editor-app/src/app/shadow-dom/shadow-dom.component.html
@@ -0,0 +1,5 @@
+<app-nav></app-nav>
+
+<p>Angular Editor inside a shadow dom component.</p>
+
+<app-container></app-container>
diff --git a/projects/angular-editor-app/src/app/shadow-dom/shadow-dom.component.scss b/projects/angular-editor-app/src/app/shadow-dom/shadow-dom.component.scss
new file mode 100644
index 00000000..e69de29b
diff --git a/projects/angular-editor-app/src/app/shadow-dom/shadow-dom.component.spec.ts b/projects/angular-editor-app/src/app/shadow-dom/shadow-dom.component.spec.ts
new file mode 100644
index 00000000..9c90cd77
--- /dev/null
+++ b/projects/angular-editor-app/src/app/shadow-dom/shadow-dom.component.spec.ts
@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ShadowDomComponent } from './shadow-dom.component';
+
+describe('ShadowDomComponent', () => {
+  let component: ShadowDomComponent;
+  let fixture: ComponentFixture<ShadowDomComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ ShadowDomComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ShadowDomComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/projects/angular-editor-app/src/app/shadow-dom/shadow-dom.component.ts b/projects/angular-editor-app/src/app/shadow-dom/shadow-dom.component.ts
new file mode 100644
index 00000000..81b76a47
--- /dev/null
+++ b/projects/angular-editor-app/src/app/shadow-dom/shadow-dom.component.ts
@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-shadow-dom',
+  templateUrl: './shadow-dom.component.html',
+  styleUrls: ['./shadow-dom.component.scss']
+})
+export class ShadowDomComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}
diff --git a/projects/angular-editor/src/lib/angular-editor-toolbar.component.ts b/projects/angular-editor/src/lib/angular-editor-toolbar.component.ts
index 3307473c..99fc118b 100644
--- a/projects/angular-editor/src/lib/angular-editor-toolbar.component.ts
+++ b/projects/angular-editor/src/lib/angular-editor-toolbar.component.ts
@@ -15,6 +15,7 @@ import {DOCUMENT} from '@angular/common';
 import {CustomClass} from './config';
 import {SelectOption} from './ae-select/ae-select.component';
 import { Observable } from 'rxjs';
+import { ElementDOM } from './element-dom';
 
 @Component({
   selector: 'angular-editor-toolbar',
@@ -22,7 +23,7 @@ import { Observable } from 'rxjs';
   styleUrls: ['./angular-editor-toolbar.component.scss'],
 })
 
-export class AngularEditorToolbarComponent {
+export class AngularEditorToolbarComponent implements ElementDOM {
   htmlMode = false;
   linkSelected = false;
   block = 'default';
@@ -168,7 +169,8 @@ export class AngularEditorToolbarComponent {
     private r: Renderer2,
     private editorService: AngularEditorService,
     private er: ElementRef,
-    @Inject(DOCUMENT) private doc: any
+    @Inject(DOCUMENT) private doc: any,
+    public elementDOM: ElementRef<HTMLElement>
   ) {
   }
 
@@ -189,7 +191,7 @@ export class AngularEditorToolbarComponent {
     }
     this.buttons.forEach(e => {
       const result = this.doc.queryCommandState(e);
-      const elementById = this.doc.getElementById(e + '-' + this.id);
+      const elementById = this.getChildById(e + '-' + this.id);
       if (result) {
         this.r.addClass(elementById, 'active');
       } else {
@@ -239,7 +241,7 @@ export class AngularEditorToolbarComponent {
     }
 
     Object.keys(this.tagMap).map(e => {
-      const elementById = this.doc.getElementById(this.tagMap[e] + '-' + this.id);
+      const elementById = this.getChildById(this.tagMap[e] + '-' + this.id);
       const node = nodes.find(x => x.nodeName === e);
       if (node !== undefined && e === node.nodeName) {
         this.r.addClass(elementById, 'active');
@@ -312,7 +314,7 @@ export class AngularEditorToolbarComponent {
    * @param m boolean
    */
   setEditorMode(m: boolean) {
-    const toggleEditorModeButton = this.doc.getElementById('toggleEditorMode' + '-' + this.id);
+    const toggleEditorModeButton = this.getChildById('toggleEditorMode' + '-' + this.id);
     if (m) {
       this.r.addClass(toggleEditorModeButton, 'active');
     } else {
@@ -382,4 +384,9 @@ export class AngularEditorToolbarComponent {
     this.execute.emit('focus');
     console.log('focused');
   }
+
+  getChildById(id: string): HTMLElement {
+    return this.elementDOM.nativeElement.querySelector(`#${id}`);
+  }
+
 }
diff --git a/projects/angular-editor/src/lib/angular-editor.component.ts b/projects/angular-editor/src/lib/angular-editor.component.ts
index bc0934ae..723304cc 100644
--- a/projects/angular-editor/src/lib/angular-editor.component.ts
+++ b/projects/angular-editor/src/lib/angular-editor.component.ts
@@ -23,6 +23,7 @@ import { DomSanitizer } from '@angular/platform-browser';
 import { AngularEditorToolbarComponent } from './angular-editor-toolbar.component';
 import { AngularEditorService } from './angular-editor.service';
 import { AngularEditorConfig, angularEditorConfig } from './config';
+import { ElementDOM } from './element-dom';
 import { isDefined } from './utils';
 
 @Component({
@@ -38,7 +39,7 @@ import { isDefined } from './utils';
     AngularEditorService
   ]
 })
-export class AngularEditorComponent implements OnInit, ControlValueAccessor, AfterViewInit, OnDestroy {
+export class AngularEditorComponent implements OnInit, ControlValueAccessor, AfterViewInit, OnDestroy, ElementDOM {
 
   private onChange: (value: string) => void;
   private onTouched: () => void;
@@ -90,7 +91,8 @@ export class AngularEditorComponent implements OnInit, ControlValueAccessor, Aft
     private sanitizer: DomSanitizer,
     private cdRef: ChangeDetectorRef,
     @Attribute('tabindex') defaultTabIndex: string,
-    @Attribute('autofocus') private autoFocus: any
+    @Attribute('autofocus') private autoFocus: any,
+    public elementDOM: ElementRef<HTMLElement>
   ) {
     const parsedTabIndex = Number(defaultTabIndex);
     this.tabIndex = (parsedTabIndex || parsedTabIndex === 0) ? parsedTabIndex : null;
@@ -195,7 +197,7 @@ export class AngularEditorComponent implements OnInit, ControlValueAccessor, Aft
     if (this.modeVisual) {
       this.textArea.nativeElement.focus();
     } else {
-      const sourceText = this.doc.getElementById('sourceText' + this.id);
+      const sourceText = this.getChildById('sourceText' + this.id);
       sourceText.focus();
       this.focused = true;
     }
@@ -428,4 +430,8 @@ export class AngularEditorComponent implements OnInit, ControlValueAccessor, Aft
     html = html.replace('position: fixed;', '');
     return html;
   }
+
+  getChildById(id: string): HTMLElement {
+    return this.elementDOM.nativeElement.querySelector(`#${id}`);
+  }
 }
diff --git a/projects/angular-editor/src/lib/element-dom.ts b/projects/angular-editor/src/lib/element-dom.ts
new file mode 100644
index 00000000..9b125c3e
--- /dev/null
+++ b/projects/angular-editor/src/lib/element-dom.ts
@@ -0,0 +1,11 @@
+import { ElementRef } from "@angular/core";
+
+export interface ElementDOM {
+    elementDOM: ElementRef<HTMLElement>
+
+    /**
+     * 
+     * @param id The id of the child element
+    */
+    getChildById(id: string): HTMLElement;
+}
\ No newline at end of file