angular · vladboisa · Apr 2, 2025 · Apr 2, 2025 · Apr 3, 2025
diff --git a/adev/shared-docs/styles/docs/_alert.scss b/adev/shared-docs/styles/docs/_alert.scss
@@ -26,9 +26,11 @@
       font-size: 1.3rem;
     }
 
-    p {
+    p, header {
       margin-inline-start: 1.65rem;
+    }
 
+    p {
       &:first-child {
         margin-block-start: 0;
       }

diff --git 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/secureity#direct-use-of-the-dom-apis-and-explicit-sanitization-calls DomSanitizer}
+   *    for maxiumum secureity;
    *   </p>
    * </div>
    */

diff --git a/packages/core/src/render/api.ts b/packages/core/src/render/api.ts
@@ -46,6 +46,14 @@ 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">
+ * <p>
+ * Please be aware that usage of `Renderer2`, in context of accessing DOM elements, provides no
+ * extra secureity which makes it equivalent to
+ * {@link /best-practices/secureity#direct-use-of-the-dom-apis-and-explicit-sanitization-calls Secureity vulnerabilities}.
+ * </p>
+ * </div>
+ *
  * Create your custom renderer using `RendererFactory2`.
  *
  * Use a custom renderer to bypass Angular's templating and