How to manipulate DOM in Portal widgets

[yundlu316]

Our team is trying to make some aesthetic changes to the ootb Form widget.  We've cloned that widget and are trying to give the Form Sections a different background and some larger/bolder font.  We've read that the best way to manipulate the DOM in angularjs is to use the Link Function tab, but we are unsure how to begin.  After inspecting our console, it looks like we want to manipulate the parent div of a <legend> tag.  What is the syntax so that we can target that specific div?

We've tried something like this without any success:

angular.element('legend').parent().addClass('newDiv');

[Brad Tilton]

Here are probably the best two resources that I've seen on dom manipulation in Service Portal:

Using the Link Function in Service Portal Widgets

DOM Manipulation the Service Portal way

[yundlu316]

Super helpful Brad!  I was able to fix our issue via pure css (thankfully), but this will definitely be great resources for future questions.  Thanks!

[tibrewalayush7]

The best practice to manipulate DOM in service portal widgets is by using "Link function".  The main advantage of using link function is by using the Link Function and “element” object, you’re staying within the confines of the current widget, and won’t accidentally impact other widgets or elements on the page.

A simple example can be understood from the following.
Service portal page (With a search widget and an input text box added as HTML attribute)

Open widget editor, in HTML template add 
<div>
<input class="form-control">
</div>

 In Link function write

Now Save it and try. You will notice that when the page first loads the text box and width is different, when you click inside the text box the value and width changes and when you move outside the text box value and width changes.