How to change the styling of nested child element inside a shadow DOM using angular

user_9618097 0
Viewed 448

I want to change the font style of a child element which is wrapped inside a parent element which is internally wrapped by others and finally it is enclosed inside a shadow root. Attaching the DOM tree structure -

DOM structure description here

I tried making changes by following code

let host = document.querySelector(".fs-timescale-dd");
      // host.setAttribute('style','font-style:normal');
       let child= host.querySelector('.select');
       child.querySelector('.ng-select').querySelector('.ng-select-container')
       .querySelector('ng-value-container').querySelector('ng-placeholder')
       .setAttribute('style','font-style:normal');

But I'm getting TypeError: Cannot read properties of null (reading 'querySelector')

I'm new to Angular, can someone please help.

shadow-dom angular css-selectors css html
2 Answers

You have not clearly mentioned your goal. After reading your question what I can understand is you want to change the font style of the options of the dropdown. If so you can do this from the following example. You can directly select the class on which you want to apply the style.

::ng-deep .some-class {
  font-style: normal;
}
user_82439990

Solved by referencing the shadow dom element by adding a class name to it. Something like this -

document.querySelector(".fs-timescale-dd").className('someName').shadowRoot.setAttribute("font","arial")
user_96180970
Related