From e4a667690a6c07804b5b6aea5e7dda5f0819cc33 Mon Sep 17 00:00:00 2001
From: vladboisa <vladboisa@gmail.com>
Date: Wed, 2 Apr 2025 20:38:40 +0200
Subject: [PATCH] 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 | 7 ++++---
 packages/core/src/render/api.ts         | 6 ++++++
 2 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/packages/core/src/linker/element_ref.ts b/packages/core/src/linker/element_ref.ts
index 67693d6ea9d..3c35de9ccba 100644
--- a/packages/core/src/linker/element_ref.ts
+++ b/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>
    */
diff --git a/packages/core/src/render/api.ts b/packages/core/src/render/api.ts
index 7c5a7ed27f1..279888b795b 100644
--- a/packages/core/src/render/api.ts
+++ b/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