I just want to access the elements inside the shadow-root. In my Angular application, one of my component is encapsulated with shadowDom.
@component({
selector: "app-home",
templateUrl: "./home.component.html",
styleUrls: ["./home.component.scss"],
encapsulation: ViewEncapsulation.ShadowDom
})
when I serve the application, this is how the rendered elements looks like
<body class>
<app-root _nghost-c0 ng-version="7.0.3">
<router-outlet _ngcontent-c1=""></router-outlet>
<app-home>
#shadow-root (open) <== shadow-root
<style>...</style>
<style>...</style>
<div id="main">
<section id="one">
<app-github-calendar _nghost-c3>
<div _ngcontent-c3 class="calendar"> Loading the data just <== this element
for you.</div>
</app-github-calendar>
</section>
</app-home>
I tried to get the "calendar" element usign javascript querySelector, getElementsByClassName, querySelectorAll etc. but I cant get element.
Tell me how to get that.