I've added {{generative_answers}} to the search results template. I'd like to add tips to the top and bottom of the Quick Answers. I don't want to display the tips if Quick Answers doesn't show for a particular query. Also like to modify the font and other attributes of Quick Answers. I see the html code generated is in a shadow-root and that makes it difficult to update via javascript. Any tips on how to do it?
Since Quick Answers are rendered inside a shadow DOM, you can’t directly modify their content or style from outside. To add tips above and below Quick Answers only when they appear, place these tips in the regular DOM just outside the Quick Answers container and use JavaScript to detect when Quick Answers are present—showing or hiding tips accordingly. Directly injecting styles or altering elements inside the shadow root via JavaScript is possible but often fragile and unsupported. Using MutationObservers or similar methods to detect changes can help keep your tips in sync with Quick Answers display.