How to access Shadow DOM with CSS in ServicePortal (Widget CSS)

[Simon Ohle]

Hey fellow developers,

I just activated the #AISearch and would like to adjust the style to fit into our company theme. Example:

I would like to make the background of the type-ahead search field of the "Facet search" widget white.

The Developer tool shows me it is this part:

I am able to get the divs and change the background color there:

.header > .ais-typeAhead > div > div {
background-color: white;
}

But it stops at the Shadow-DOM. I am not able to manipulate it. Can you help me how I can adjust the widget CSS?

.header > .ais-typeAhead > div > div sn-search-combobox > ($0 | #shadow-root  | >)> sn-search-combobox-deskto{
background-color: white;
}

Thanks,

Simon

[Wei_ Ling]

Have you solved your problem? I also encountered the same problem?

[nifiru]

Same issue for me. Any solutions found?

[Simon Pelluet]

Hello,
You can inject CSS from the widget client controller.

1) Go to your custom "Typeahead Search" widget
2) Add an id attribute to sn-search-combobox tag so you can target it from the client controller: 

 <sn-search-combobox id="combobox-search" class="aisearch" 
      search-context-config-id="{{c.data.searchApplicationId}}"
      placeholder="{{::c.options.placeholder}}" 
      search-term="{{c.data.q}}" 
      disable-autocomplete="{{c.options.disable_all_suggestions}}"
      placement="header"
      enable-exact-match=false>
</sn-search-combobox>

 3) Add this script in the client controller:

$timeout(function(){
	var style = document.createElement('style');
	style.innerHTML = 'div.input-container {background: transparent}';
	$window.document.getElementById("combobox-search").shadowRoot.childNodes[0].shadowRoot.appendChild(style);
}, 100);

4) Modify the css string

Regards

[Kip Lamb]

Thanks Simon, 

Any suggestions on how to do this for a component in UI Builder? The Platform Notifications experience has a Notifications Preferences component with a purple background color that is controlled in the shadowRoot. I want to set that background to transparent.