getElementById alway null or undefined in angular 10

[ohabash]

There are many errors with my current setup related to selecting elements from the dom. Here are some examples

core.js:4197 ERROR TypeError: Cannot read property 'focus' of null core.js:4197 ERROR TypeError: Cannot read property 'classList' of null

for example; the focus error came from code like this. kolkov-angular-editor.js:1533

       const sourceText = this.doc.getElementById('sourceText' + this.id);
       sourceText.focus();

Environment

Angular CLI: 10.0.7
Node: 10.16.3
OS: darwin x64

Angular: 10.0.11
... animations, common, compiler, compiler-cli, core, elements
... forms, platform-browser, platform-browser-dynamic, router
Ivy Workspace: Yes

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.1000.7
@angular-devkit/build-angular     0.1000.7
@angular-devkit/build-optimizer   0.1000.7
@angular-devkit/build-webpack     0.1000.7
@angular-devkit/core              10.0.7
@angular-devkit/schematics        10.0.7
@angular/cli                      10.0.7
@angular/fire                     6.0.2
@ngtools/webpack                  10.0.7
@schematics/angular               10.0.7
@schematics/update                0.1000.7
rxjs                              6.5.5
typescript                        3.9.7
webpack                           4.43.0

dependancies

"dependencies": {
    "@angular/animations": "~10.0.6",
    "@angular/common": "~10.0.6",
    "@angular/compiler": "~10.0.6",
    "@angular/core": "~10.0.6",
    "@angular/elements": "^10.0.11",
    "@angular/fire": "^6.0.2",
    "@angular/forms": "^10.0.11",
    "@angular/platform-browser": "~10.0.6",
    "@angular/platform-browser-dynamic": "~10.0.6",
    "@angular/router": "~10.0.6",
    "@fortawesome/fontawesome-free": "^5.14.0",
    "@kolkov/angular-editor": "^1.1.4",
    "@ng-select/ng-select": "^5.0.1",
    "@types/jquery": "^3.5.4",
    "@webcomponents/custom-elements": "^1.4.2",
    "@webcomponents/webcomponentsjs": "^2.4.4",
    "concat": "^1.0.3",
    "document-register-element": "^1.7.2",
    "fast-filter": "^1.0.4",
    "firebase": "^7.19.0",
    "fs-extra": "^9.0.1",
    "haikunator": "^2.1.2",
    "jquery": "^3.5.1",
    "jsoneditor": "^9.0.4",
    "kebab-case": "^1.0.0",
    "lodash.camelcase": "^4.3.0",
    "lodash.kebabcase": "^4.1.1",
    "ngx-color-picker": "^10.0.1",
    "rangeslider-pure": "^0.4.11",
    "rxjs": "~6.5.5",
    "rxjs-compat": "^6.6.2",
    "stackedit-js": "^1.0.7",
    "tslib": "^2.0.0",
    "zone.js": "~0.10.3"
  },

[RicardoPhilippe]

Are you using "encapsulation: ViewEncapsulation.ShadowDom"?

[mdtalel]

I am using "encapsulation: ViewEncapsulation.ShadowDom" to prevent global css affecting editor preview