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

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.

htmlcssangularcss-selectorsshadow-dom


Solution 1:[1]

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;
}

Solution 2:[2]

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")

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Khushbu Choksi
Solution 2 Jakub Kurdziel

Related Questions