docs: add Security-DomSanitizer link in ElemnetRef&Renderer2 (#60708)

Renderer2 and ElementRef didn't mention the Security-DomSanitizer method, this will add clarity for potential user what to expect. Also swap deprecated "callout" class to docs-alert

Fixes #51208 , #46904

PR Close #60708

packages/core/src/linker/element_ref.ts

@@ -49,12 +49,13 @@ export function createElementRef(tNode: TNode, lView: LView): ElementRef {
 // and could do better codegen in the future.
 export class ElementRef<T = any> {
   /**
-   * <div class="callout is-critical">
+   * <div class="docs-alert docs-alert-important">
    *   <header>Use with caution</header>
    *   <p>
    *    Use this API as the last resort when direct access to DOM is needed. Use templating and
-   *    data-binding provided by Angular instead. Alternatively you can take a look at
-   *    {@link Renderer2} which provides an API that can be safely used.
+   *    data-binding provided by Angular instead. If used, it is recommended in combination with
+   *    {@link /best-practices/security#direct-use-of-the-dom-apis-and-explicit-sanitization-calls}
+   *    for maxiumum security;
    *   </p>
    * </div>
    */

packages/core/src/render/api.ts

@@ -46,6 +46,12 @@ export abstract class RendererFactory2 {
  * renders a template into DOM. You can use custom rendering to intercept
  * rendering calls, or to render to something other than DOM.
  *
+ * <div class="docs-alert docs-alert-important">
+ * Please be aware that usage of `Renderer2`, in context of accessing DOM elements, provides no
+ * extra security which makes it equivalent to
+ * {@link /best-practices/security#direct-use-of-the-dom-apis-and-explicit-sanitization-calls}.
+ * </div>
+ *
  * Create your custom renderer using `RendererFactory2`.
  *
  * Use a custom renderer to bypass Angular's templating and