@openui5/sap.ui.core 1.91.0 → 1.93.2

package/src/sap/ui/core/RenderManager.js

@@ -38,6 +38,7 @@ sap.ui.define([
 ) {
 
 	"use strict";
+	/*global SVGElement*/
 
 	var aCommonMethods = ["renderControl", "cleanupControlWithoutRendering", "accessibilityState", "icon"];
 
@@ -49,6 +50,10 @@ sap.ui.define([
 
 	var aNonRendererMethods = ["render", "flush", "destroy"];
 
+	var oTemplate = document.createElement("template");
+
+	var ATTR_STYLE_KEY_MARKER = "data-sap-ui-stylekey";
+
 	/**
 	 * Creates an instance of the RenderManager.
 	 *
@@ -78,7 +83,7 @@ sap.ui.define([
 	 * suffix 'Renderer'. So for a control <code>sap.m.Input</code> the default renderer will be searched
 	 * for under the global name <code>sap.m.Input<i>Renderer</i></code>.
 	 *
-	 * <h3>In-place DOM patching</h3>
+	 * <h3>Semantic Rendering</h3>
 	 * As of 1.67, <code>RenderManager</code> provides a set of new APIs to describe the structure of the DOM that can be used by the control renderers.
 	 *
 	 * <pre>
@@ -118,7 +123,7 @@ sap.ui.define([
 	 * <pre>
 	 *
 	 *   var myButtonRenderer = {
-	 *       apiVersion: 2    // enable in-place DOM patching
+	 *       apiVersion: 2    // enable semantic rendering
 	 *   };
 	 *
 	 *   myButtonRenderer.render = function(rm, oButton) {
@@ -175,12 +180,9 @@ sap.ui.define([
 	 * @see sap.ui.core.Core
 	 * @see sap.ui.getCore
 	 *
-	 * @borrows sap.ui.core.RenderManager#writeAccessibilityState as #accessibilityState
-	 * @borrows sap.ui.core.RenderManager#writeIcon as #icon
-	 *
 	 * @extends Object
 	 * @author SAP SE
-	 * @version 1.91.0
+	 * @version 1.93.2
 	 * @alias sap.ui.core.RenderManager
 	 * @public
 	 */
@@ -198,7 +200,9 @@ sap.ui.define([
 			bDomInterface,                 // specifies the rendering interface that is used by the control renderers
 			sLegacyRendererControlId = "", // stores the id of the control that has a legacy renderer while its parent has the new semantic renderer
 			oStringInterface = {},         // holds old string based rendering API and the string implementation of the new semantic rendering API
-			oDomInterface = {};            // semantic rendering API for the controls whose renderer provides apiVersion=2 marker
+			oDomInterface = {},            // semantic rendering API for the controls whose renderer provides apiVersion=2 marker
+			aRenderingStyles = [],         // during string-based rendering, stores the styles that couldn't be set via style attribute due to CSP restrictions
+			oPatcher = new Patcher();      // the Patcher instance to handle in-place DOM patching
 
 		/**
 		 * Sets the focus handler to be used by the RenderManager.
@@ -260,10 +264,27 @@ sap.ui.define([
 		//#################################################################################################
 
 		/**
-		 * Write the given texts to the buffer
+		 * Write the given texts to the buffer.
 		 * @param {...string|number} sText (can be a number too)
-		 * @return {this} Reference to <code>this</code> in order to allow method chaining
+		 * @returns {this} Reference to <code>this</code> in order to allow method chaining
 		 * @public
+		 * @deprecated Since 1.92. Instead, use the {@link sap.ui.core.RenderManager Semantic Rendering API}.
+		 *   There is no 1:1 replacement for <code>write</code>. Typically, <code>write</code> is used to create
+		 *   a longer sequence of HTML markup (e.g. an element with attributes and children) in a single call.
+		 *   Such a markup sequence has to be split into the individual calls of the Semantic Rendering API.
+		 *
+		 *   <br><br>Example:<br>
+		 *     oRm.write("&lt;span id=\"" + oCtrl.getId() + "-outer\" class=\"myCtrlOuter\"&gt;"
+		 *        + "&amp;nbsp;" + oResourceBundle.getText("TEXT_KEY") + "&amp;nbsp;&lt;/span&gt;");
+		 *   <br><br>
+		 *   has to be transformed to
+		 *   <br><br>
+		 *   oRm.openStart("span", oCtrl.getId() + "-outer").class("myCtrlOuter").openEnd().text("\u00a0" + oResourceBundle.getText("TEXT_KEY") + "\u00a0").close("span");
+		 *   <br><br>
+		 *   Note that "&amp;nbsp;" was replaced with "\u00a0" (no-break-space). In general, HTML entities
+		 *   have to be replaced by the corresponding Unicode character escapes. A mapping table can be found
+		 *   at {@link https://html.spec.whatwg.org/multipage/named-characters.html#named-character-references}.
+		 *
 		 * @SecSink {*|XSS}
 		 */
 		this.write = function(/** string|number */ sText /* ... */) {
@@ -279,8 +300,9 @@ sap.ui.define([
 		 *
 		 * @param {any} sText the text to escape
 		 * @param {boolean} [bLineBreaks=false] Whether to convert line breaks into <br> tags
-		 * @return {this} Reference to <code>this</code> in order to allow method chaining
+		 * @returns {this} Reference to <code>this</code> in order to allow method chaining
 		 * @public
+		 * @deprecated Since 1.92. Instead use {@link sap.ui.core.RenderManager#text} of the {@link sap.ui.core.RenderManager Semantic Rendering API}.
 		 */
 		this.writeEscaped = function(sText, bLineBreaks) {
 			if ( sText != null ) {
@@ -300,8 +322,9 @@ sap.ui.define([
 		 *
 		 * @param {string} sName Name of the attribute
 		 * @param {string | number | boolean} vValue Value of the attribute
-		 * @return {this} Reference to <code>this</code> in order to allow method chaining
+		 * @returns {this} Reference to <code>this</code> in order to allow method chaining
 		 * @public
+		 * @deprecated Since 1.92. Instead use {@link sap.ui.core.RenderManager#attr} of the {@link sap.ui.core.RenderManager Semantic Rendering API}.
 		 * @SecSink {0 1|XSS} Attributes are written to HTML without validation
 		 */
 		this.writeAttribute = function(sName, vValue) {
@@ -318,8 +341,9 @@ sap.ui.define([
 		 *
 		 * @param {string} sName Name of the attribute
 		 * @param {any} vValue Value of the attribute
-		 * @return {this} Reference to <code>this</code> in order to allow method chaining
+		 * @returns {this} Reference to <code>this</code> in order to allow method chaining
 		 * @public
+		 * @deprecated Since 1.92. Instead use {@link sap.ui.core.RenderManager#attr} of the {@link sap.ui.core.RenderManager Semantic Rendering API}.
 		 * @SecSink {0|XSS}
 		 */
 		this.writeAttributeEscaped = function(sName, vValue) {
@@ -334,8 +358,9 @@ sap.ui.define([
 		 *
 		 * @param {string} sName Name of the CSS property to write
 		 * @param {string|float|int} vValue Value to write
-		 * @return {this} Reference to <code>this</code> in order to allow method chaining
+		 * @returns {this} Reference to <code>this</code> in order to allow method chaining
 		 * @public
+		 * @deprecated Since 1.92. Instead use {@link sap.ui.core.RenderManager#style} of the {@link sap.ui.core.RenderManager Semantic Rendering API}.
 		 * @SecSink {0 1|XSS} Styles are written to HTML without validation
 		 */
 		this.addStyle = function(sName, vValue) {
@@ -353,13 +378,17 @@ sap.ui.define([
 
 		/**
 		 * Writes and flushes the style collection
-		 * @return {this} Reference to <code>this</code> in order to allow method chaining
+		 * @returns {this} Reference to <code>this</code> in order to allow method chaining
 		 * @public
+		 * @deprecated Since 1.92. Not longer needed, when using the {@link sap.ui.core.RenderManager Semantic Rendering API}
+		 *  the actual writing of styles happens when {@link sap.ui.core.RenderManager#openEnd} or {@link sap.ui.core.RenderManager#voidEnd} are used.
 		 */
 		this.writeStyles = function() {
 			var oStyle = aStyleStack[aStyleStack.length - 1];
 			if (oStyle.aStyle && oStyle.aStyle.length) {
-				this.writeAttribute("style", oStyle.aStyle.join(" "));
+				// Due to possible CSP restrictions we do not write styles into the HTML buffer. Instead, we store the styles in the aRenderingStyles array
+				// and add a ATTR_STYLE_KEY_MARKER attribute marker for which the value references the original style index in the aRenderingStyles array.
+				this.writeAttribute(ATTR_STYLE_KEY_MARKER, aRenderingStyles.push(oStyle.aStyle.join(" ")) - 1);
 			}
 			oStyle.aStyle = null;
 			return this;
@@ -370,8 +399,9 @@ sap.ui.define([
 		 * The class collection is flushed if it is written to the buffer using {@link #writeClasses}
 		 *
 		 * @param {string} sName name of the class to be added; null values are ignored
-		 * @return {this} Reference to <code>this</code> in order to allow method chaining
+		 * @returns {this} Reference to <code>this</code> in order to allow method chaining
 		 * @public
+		 * @deprecated Since 1.92. Instead use {@link sap.ui.core.RenderManager#class} of the {@link sap.ui.core.RenderManager Semantic Rendering API}.
 		 * @SecSink {0|XSS} Classes are written to HTML without validation
 		 */
 		this.addClass = function(sName) {
@@ -393,8 +423,10 @@ sap.ui.define([
 		 * classes are added instead. If oElement === false, no custom style classes are added.
 		 *
 		 * @param {sap.ui.core.Element | boolean} [oElement] an Element from which to add custom style classes (instead of adding from the control itself)
-		 * @return {this} Reference to <code>this</code> in order to allow method chaining
+		 * @returns {this} Reference to <code>this</code> in order to allow method chaining
 		 * @public
+		 * @deprecated Since 1.92. Not longer needed, when using the {@link sap.ui.core.RenderManager Semantic Rendering API}
+		 *  the actual writing of classes happens when {@link sap.ui.core.RenderManager#openEnd} or {@link sap.ui.core.RenderManager#voidEnd} are used.
 		 */
 		this.writeClasses = function(oElement) {
 			assert(!oElement || typeof oElement === "boolean" || BaseObject.isA(oElement, 'sap.ui.core.Element'), "oElement must be empty, a boolean, or an sap.ui.core.Element");
@@ -439,7 +471,7 @@ sap.ui.define([
 		 *
 		 * @param {string} sTagName Tag name of the HTML element
 	 	 * @param {sap.ui.core.Element|sap.ui.core.ID} [vControlOrId] Control instance or ID to identify the element
-		 * @return {this} Reference to <code>this</code> in order to allow method chaining
+		 * @returns {this} Reference to <code>this</code> in order to allow method chaining
 		 *
 		 * @public
 		 * @since 1.67
@@ -466,7 +498,7 @@ sap.ui.define([
 		 *
 		 * This indicates that there are no more attributes to set to the open tag.
 		 *
-		 * @return {this} Reference to <code>this</code> in order to allow method chaining
+		 * @returns {this} Reference to <code>this</code> in order to allow method chaining
 		 * @public
 		 * @since 1.67
 		 */
@@ -488,7 +520,7 @@ sap.ui.define([
 		 * This indicates that there are no more children to append to the open tag.
 		 *
 		 * @param {string} sTagName Tag name of the HTML element
-		 * @return {this} Reference to <code>this</code> in order to allow method chaining
+		 * @returns {this} Reference to <code>this</code> in order to allow method chaining
 		 * @public
 		 * @since 1.67
 		 */
@@ -510,7 +542,7 @@ sap.ui.define([
 		 *
 		 * @param {string} sTagName Tag name of the HTML element
 		 * @param {sap.ui.core.Element|sap.ui.core.ID} [vControlOrId] Control instance or ID to identify the element
-		 * @return {this} Reference to <code>this</code> in order to allow method chaining
+		 * @returns {this} Reference to <code>this</code> in order to allow method chaining
 		 * @public
 		 * @since 1.67
 		 */
@@ -527,7 +559,7 @@ sap.ui.define([
 		 * This indicates that there are no more attributes to set to the open tag.
 		 * For self-closing tags <code>close</code> must not be called.
 		 *
-		 * @return {this} Reference to <code>this</code> in order to allow method chaining
+		 * @returns {this} Reference to <code>this</code> in order to allow method chaining
 		 * @public
 		 * @since 1.67
 		 */
@@ -549,7 +581,7 @@ sap.ui.define([
 		 * This must not be used for plain texts; use the <code>text</code> method instead.
 		 *
 		 * @param {string} sHtml Well-formed, valid HTML markup
-		 * @return {this} Reference to <code>this</code> in order to allow method chaining
+		 * @returns {this} Reference to <code>this</code> in order to allow method chaining
 		 * @public
 		 * @since 1.67
 		 * @SecSink {*|XSS}
@@ -564,8 +596,17 @@ sap.ui.define([
 		/**
 		 * Sets the text content with the given text.
 		 *
+		 * Line breaks are not supported by this method, use CSS
+		 * {@link https://www.w3.org/TR/CSS2/text.html#white-space-prop white-space: pre-line}
+		 * option to implement line breaks.
+		 *
+		 * HTML entities are not supported by this method,
+		 * use unicode escaping or the unicode character to implement HTML entities.
+		 * For further information see
+		 * {@link https://html.spec.whatwg.org/multipage/named-characters.html#named-character-references}.
+		 *
 		 * @param {string} sText The text to be written
-		 * @return {this} Reference to <code>this</code> in order to allow method chaining
+		 * @returns {this} Reference to <code>this</code> in order to allow method chaining
 		 * @public
 		 * @since 1.67
 		 */
@@ -586,9 +627,14 @@ sap.ui.define([
 		 * For HTML elements, {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes attribute names} must all be set in lowercase.
 		 * For foreign elements, such as SVG, {@link https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute attribute names} can be set in upper camel case (e.g. viewBox).
 		 *
+		 * HTML entities are not supported by this method,
+		 * use unicode escaping or the unicode character to implement HTML entities.
+		 * For further information see
+		 * {@link https://html.spec.whatwg.org/multipage/named-characters.html#named-character-references}.
+		 *
 		 * @param {string} sName Name of the attribute
 		 * @param {*} vValue Value of the attribute
-		 * @return {this} Reference to <code>this</code> in order to allow method chaining
+		 * @returns {this} Reference to <code>this</code> in order to allow method chaining
 		 * @public
 		 * @since 1.67
 		 */
@@ -606,7 +652,7 @@ sap.ui.define([
 		 * Class name must not contain any whitespace.
 		 *
 		 * @param {string} sClass Class name to be written
-		 * @return {this} Reference to <code>this</code> in order to allow method chaining
+		 * @returns {this} Reference to <code>this</code> in order to allow method chaining
 		 * @public
 		 * @since 1.67
 		 */
@@ -623,10 +669,13 @@ sap.ui.define([
 		 * Adds a style name-value pair to the style collection of the last open HTML element.
 		 *
 		 * This is only valid when called between <code>openStart/voidStart</code> and <code>openEnd/voidEnd</code>.
+		 * To allow a more efficient DOM update, the CSS property names and values have to be used in their canonical form.
+		 * In general, CSS properties are lower-cased in their canonical form, except for parts that are not under the control of CSS.
+		 * For more information, see {@link https://www.w3.org/TR/CSS/#indices}.
 		 *
 		 * @param {string} sName Name of the style property
 		 * @param {string} sValue Value of the style property
-		 * @return {this} Reference to <code>this</code> in order to allow method chaining
+		 * @returns {this} Reference to <code>this</code> in order to allow method chaining
 		 * @public
 		 * @since 1.67
 		 */
@@ -637,10 +686,101 @@ sap.ui.define([
 			return this;
 		};
 
-		// @borrows sap.ui.core.RenderManager#writeAccessibilityState as accessibilityState
+		/**
+		 * Collects accessibility related attributes for an <code>Element</code> and renders them as part of
+		 * the currently rendered DOM element.
+		 *
+		 * See the WAI-ARIA specification for a general description of the accessibility related attributes.
+		 * Attributes are only rendered when the accessibility feature is activated in the UI5 runtime configuration.
+		 *
+		 * The values for the attributes are collected from the following sources (last one wins):
+		 * <ol>
+		 * <li>from the properties and associations of the given <code>oElement</code>, using a heuristic mapping
+		 *     (described below)</li>
+		 * <li>from the <code>mProps</code> parameter, as provided by the caller</li>
+		 * <li>from the parent of the given <code>oElement</code>, if it has a parent and if the parent implements
+		 *     the method {@link sap.ui.core.Element#enhanceAccessibilityState enhanceAccessibilityState}</li>
+		 * </ol>
+		 * If no <code>oElement</code> is given, only <code>mProps</code> will be taken into account.
+		 *
+		 *
+		 * <h3>Heuristic Mapping</h3>
+		 * The following mapping from properties/values to ARIA attributes is used (if the element does have such properties):
+		 * <ul>
+		 * <li><code>editable===false</code> => <code>aria-readonly="true"</code></li>
+		 * <li><code>enabled===false</code> => <code>aria-disabled="true"</code></li>
+		 * <li><code>visible===false</code> => <code>aria-hidden="true"</code></li>
+		 * <li><code>required===true</code> => <code>aria-required="true"</code></li>
+		 * <li><code>selected===true</code> => <code>aria-selected="true"</code></li>
+		 * <li><code>checked===true</code> => <code>aria-checked="true"</code></li>
+		 * </ul>
+		 *
+		 * In case of the <code>required</code> property, all label controls which reference the given element
+		 * in their <code>labelFor</code> relation are additionally taken into account when determining the
+		 * value for the <code>aria-required</code> attribute.
+		 *
+		 * Additionally, the associations <code>ariaDescribedBy</code> and <code>ariaLabelledBy</code> are used to
+		 * determine the lists of IDs for the ARIA attributes <code>aria-describedby</code> and
+		 * <code>aria-labelledby</code>.
+		 *
+		 * Label controls that reference the given element in their <code>labelFor</code> relation are automatically
+		 * added to the <code>aria-labelledby</code> attribute.
+		 *
+		 * Note: This function is only a heuristic of a control property to ARIA attribute mapping. Control developers
+		 * have to check whether it fulfills their requirements. In case of problems (for example the <code>RadioButton</code> has a
+		 * <code>selected</code> property but must provide an <code>aria-checked</code> attribute) the auto-generated
+		 * result of this function can be influenced via the parameter <code>mProps</code> as described below.
+		 *
+		 * The parameter <code>mProps</code> can be used to either provide additional attributes which should be rendered
+		 * and/or to avoid the automatic generation of single ARIA attributes. The 'aria-' prefix will be prepended
+		 * automatically to the keys (Exception: Attribute <code>role</code> does not get the prefix 'aria-').
+		 *
+		 *
+		 * Examples:<br>
+		 * <code>{hidden : true}</code> results in <code>aria-hidden="true"</code> independent of the presence or
+		 * absence of the visibility property.<br>
+		 * <code>{hidden : null}</code> ensures that no <code>aria-hidden</code> attribute is written independent
+		 * of the presence or absence of the visibility property.<br>
+		 *
+		 * The function behaves in the same way for the associations <code>ariaDescribedBy</code> and <code>ariaLabelledBy</code>.
+		 * To append additional values to the auto-generated <code>aria-describedby</code> and <code>aria-labelledby</code>
+		 * attributes, the following format can be used:
+		 * <pre>
+		 *   {describedby : {value: "id1 id2", append: true}} =>  aria-describedby = "ida idb id1 id2"
+		 * </pre>
+		 * (assuming that "ida idb" is the auto-generated part based on the association <code>ariaDescribedBy</code>).
+		 *
+		 * @param {sap.ui.core.Element}
+		 *            [oElement] The <code>Element</code> whose accessibility state should be rendered
+		 * @param {object}
+		 *            [mProps] A map of additional properties that should be added or changed.
+		 * @returns {this} Reference to <code>this</code> in order to allow method chaining
+		 * @public
+		 * @function
+		 */
 		this.accessibilityState = this.writeAccessibilityState;
 
-		// @borrows sap.ui.core.RenderManager#writeIcon as icon
+		/**
+		 * Writes either an &lt;img&gt; tag for normal URI or a &lt;span&gt; tag with needed properties for an icon URI.
+		 *
+		 * Additional classes and attributes can be added to the tag with the second and third parameter.
+		 * All of the given attributes are escaped when necessary for security consideration.
+		 *
+		 * When an &lt;img&gt; tag is rendered, the following two attributes are added by default
+		 * and can be overwritten with corresponding values in the <code>mAttributes</code> parameter:
+		 * <ul>
+		 * <li><code>role: "presentation"</code></Li>
+		 * <li><code>alt: ""</code></li>
+		 * </ul>
+		 *
+		 * @param {sap.ui.core.URI} sURI URI of an image or of an icon registered in {@link sap.ui.core.IconPool}
+		 * @param {array|string} [aClasses] Additional classes that are added to the rendered tag
+		 * @param {object} [mAttributes] Additional attributes that will be added to the rendered tag.
+		 * Currently the attributes <code>class</code> and <code>style</code> are not allowed
+		 * @returns {this} Reference to <code>this</code> in order to allow method chaining
+		 * @public
+		 * @function
+		 */
 		this.icon = this.writeIcon;
 
 
@@ -655,11 +795,11 @@ sap.ui.define([
 			sOpenTag = sTagName;
 
 			if (!vControlOrId) {
-				Patcher.openStart(sTagName);
+				oPatcher.openStart(sTagName);
 			} else if (typeof vControlOrId == "string") {
-				Patcher.openStart(sTagName, vControlOrId);
+				oPatcher.openStart(sTagName, vControlOrId);
 			} else {
-				Patcher.openStart(sTagName, vControlOrId.getId());
+				oPatcher.openStart(sTagName, vControlOrId.getId());
 				renderElementData(this, vControlOrId);
 			}
 
@@ -679,7 +819,7 @@ sap.ui.define([
 			assertValidAttr(sName);
 			assertOpenTagHasStarted("attr");
 
-			Patcher.attr(sName, vValue);
+			oPatcher.attr(sName, vValue);
 			return this;
 		};
 
@@ -689,7 +829,7 @@ sap.ui.define([
 				assertValidClass.apply(this, arguments);
 				assertOpenTagHasStarted("class");
 
-				Patcher.class(sClass);
+				oPatcher.class(sClass);
 			}
 
 			return this;
@@ -700,7 +840,7 @@ sap.ui.define([
 			assertValidStyle(sName);
 			assertOpenTagHasStarted("style");
 
-			Patcher.style(sName, vValue);
+			oPatcher.style(sName, vValue);
 			return this;
 		};
 
@@ -710,7 +850,7 @@ sap.ui.define([
 				var oStyle = aStyleStack[aStyleStack.length - 1];
 				var aStyleClasses = oStyle.aCustomStyleClasses;
 				if (aStyleClasses) {
-					aStyleClasses.forEach(Patcher.class, Patcher);
+					aStyleClasses.forEach(oPatcher.class, oPatcher);
 					oStyle.aCustomStyleClasses = null;
 				}
 			}
@@ -720,7 +860,7 @@ sap.ui.define([
 			assert(bExludeStyleClasses === undefined || bExludeStyleClasses === true, "The private parameter bExludeStyleClasses must be true or omitted!");
 			sOpenTag = "";
 
-			Patcher.openEnd();
+			oPatcher.openEnd();
 			return this;
 		};
 
@@ -730,7 +870,7 @@ sap.ui.define([
 				var oStyle = aStyleStack[aStyleStack.length - 1];
 				var aStyleClasses = oStyle.aCustomStyleClasses;
 				if (aStyleClasses) {
-					aStyleClasses.forEach(Patcher.class, Patcher);
+					aStyleClasses.forEach(oPatcher.class, oPatcher);
 					oStyle.aCustomStyleClasses = null;
 				}
 			}
@@ -740,7 +880,7 @@ sap.ui.define([
 			bVoidOpen = false;
 			sOpenTag = "";
 
-			Patcher.voidEnd();
+			oPatcher.voidEnd();
 			return this;
 		};
 
@@ -749,7 +889,7 @@ sap.ui.define([
 			assertOpenTagHasEnded();
 
 			if (sText != null) {
-				Patcher.text(sText);
+				oPatcher.text(sText);
 			}
 
 			return this;
@@ -759,7 +899,7 @@ sap.ui.define([
 		oDomInterface.unsafeHtml = function(sHtml) {
 			assertOpenTagHasEnded();
 
-			Patcher.unsafeHtml(sHtml);
+			oPatcher.unsafeHtml(sHtml);
 			return this;
 		};
 
@@ -768,7 +908,7 @@ sap.ui.define([
 			assertValidName(sTagName, "tag");
 			assertOpenTagHasEnded();
 
-			Patcher.close(sTagName);
+			oPatcher.close(sTagName);
 			return this;
 		};
 
@@ -959,21 +1099,26 @@ sap.ui.define([
 				} else if (bDomInterface === undefined) {
 
 					// rendering interface must be determined for the root control once per rendering
-					// depending on the DOM reference of the control within the DOM tree
-					oDomRef = oControl.getDomRef() || InvisibleRenderer.getDomRef(oControl);
+					if (RenderManager.getApiVersion(oRenderer) == 2) {
 
-					// DOM based rendering is valid only for the controls that are already rendered and providing apiVersion=2 marker.
-					// If the control is in the preserved area then we should not use DOM rendering interface to avoid patching of preserved nodes.
-					if (oDomRef && RenderManager.getApiVersion(oRenderer) == 2 && !RenderManager.isPreservedContent(oDomRef)) {
+						// get the visible or invisible DOM element of the control
+						oDomRef = oDomRef || oControl.getDomRef() || InvisibleRenderer.getDomRef(oControl);
 
-						// patching will happen during the control renderer calls therefore we need to get the focus info before the patching
-						oFocusHandler && oFocusHandler.storePatchingControlFocusInfo(oDomRef);
+						// If the control is in the preserved area then we should not use the DOM-based rendering to avoid patching of preserved nodes
+						if (RenderManager.isPreservedContent(oDomRef)) {
+							bDomInterface = false;
+						} else {
+							// patching will happen during the control renderer calls therefore we need to get the focus info before the patching
+							if (oDomRef && oFocusHandler) {
+								oFocusHandler.storePatchingControlFocusInfo(oDomRef);
+							}
 
-						// set the starting point of the Patcher
-						Patcher.setRootNode(oDomRef);
+							// set the starting point of the Patcher
+							oPatcher.setRootNode(oDomRef);
 
-						// remember that we are using DOM based rendering interface
-						bDomInterface = true;
+							// remember that we are using DOM based rendering interface
+							bDomInterface = true;
+						}
 
 					} else {
 
@@ -1005,17 +1150,17 @@ sap.ui.define([
 				if (bDomInterface) {
 
 					// remember the cursor of the Patcher before the control renderer is executed
-					var oCurrentNode = Patcher.getCurrentNode();
+					var oCurrentNode = oPatcher.getCurrentNode();
 
 					// execute the control renderer with DOM rendering interface
 					oRenderer.render(oDomInterface, oControl);
 
 					// during the rendering the cursor of the Patcher should move to the next element when openStart or voidStart is called
 					// compare after rendering cursor with before rendering cursor to determine whether the control produced any output
-					if (Patcher.getCurrentNode() == oCurrentNode) {
+					if (oPatcher.getCurrentNode() == oCurrentNode) {
 
 						// we need to remove the control DOM if there is no output produced
-						Patcher.unsafeHtml("", oControl.getId());
+						oPatcher.unsafeHtml("", oControl.getId());
 						oControl.bOutput = false;
 					} else {
 						oControl.bOutput = true;
@@ -1038,7 +1183,7 @@ sap.ui.define([
 
 				// at the end of the rendering apply the rendering buffer of the control that is forced to render string interface
 				if (sLegacyRendererControlId && sLegacyRendererControlId === oControl.getId()) {
-					Patcher.unsafeHtml(aBuffer.join(""), sLegacyRendererControlId);
+					oPatcher.unsafeHtml(aBuffer.join(""), sLegacyRendererControlId, restoreStyles);
 					sLegacyRendererControlId = "";
 					bDomInterface = true;
 					aBuffer = [];
@@ -1083,7 +1228,7 @@ sap.ui.define([
 		 *
 		 * @param {sap.ui.core.Control}
 		 *            oControl the Control whose HTML should be returned.
-		 * @return {string} the resulting HTML of the provided control
+		 * @returns {string} the resulting HTML of the provided control
 		 * @deprecated Since version 0.15.0. Use <code>flush()</code> instead render content outside the rendering phase.
 		 * @public
 		 */
@@ -1155,15 +1300,52 @@ sap.ui.define([
 			}
 		}
 
-		function flushInternal(fnPutIntoDom, fnDone) {
+		function flushInternal(fnPutIntoDom, fnDone, oTargetDomNode) {
 
 			var oStoredFocusInfo;
 			if (!bDomInterface) {
+				// DOM-based rendering was not possible we are in the string-based initial rendering or re-rendering phase
 				oStoredFocusInfo = oFocusHandler && oFocusHandler.getControlFocusInfo();
-				fnPutIntoDom(aBuffer.join(""));
+				var sHtml = aBuffer.join("");
+				if (sHtml && aRenderingStyles.length) {
+					// During the string-based rendering, RM#writeStyles method is not writing the styles into the HTML buffer due to possible CSP restrictions.
+					// Instead, we store the styles in the aRenderingStyles array and add an ATTR_STYLE_KEY_MARKER attribute marker for which the value
+					// references the original style index in this array.
+					// Not to violate the CSP, we need to bring the original styles via HTMLElement.style API. Here we are converting the HTML buffer of
+					// string-based rendering to DOM nodes so that we can restore the orginal styles before we inject the rendering output to the DOM tree.
+					if (oTargetDomNode instanceof SVGElement && oTargetDomNode.localName != "foreignObject") {
+						oTemplate.innerHTML = "<svg>" + sHtml + "</svg>";
+						oTemplate.replaceWith.apply(oTemplate.content.firstChild, oTemplate.content.firstChild.childNodes);
+					} else {
+						oTemplate.innerHTML = sHtml;
+					}
+
+					restoreStyles(oTemplate.content.childNodes);
+					fnPutIntoDom(oTemplate.content);
+				} else {
+					fnPutIntoDom(sHtml);
+				}
 			} else {
-				oStoredFocusInfo = oFocusHandler && oFocusHandler.getPatchingControlFocusInfo();
-				Patcher.reset();
+				// get the root node of the Patcher to determine whether we are in the initial rendering or the re-rendering phase
+				var oRootNode = oPatcher.getRootNode();
+
+				// in case of DOM-based initial rendering, the Patcher creates a DocumentFragment to assemble all created control DOM nodes within it
+				if (oRootNode.nodeType == 11 /* Node.DOCUMENT_FRAGMENT_NODE */) {
+					// even though we are in the initial rendering phase a control within the control tree might has been already rendered before
+					// therefore we need to store the currectly focused control info before we inject the DocumentFragment into the real DOM tree
+					oStoredFocusInfo = oFocusHandler && oFocusHandler.getControlFocusInfo();
+
+					// controls are not necessarily need to produce output during their rendering
+					// in case of output is produced, let the callback injects the DocumentFragment
+					fnPutIntoDom(oRootNode.lastChild ? oRootNode : "");
+				} else {
+					// in case of DOM-based re-rendering, the root node of the Patcher must be an existing HTMLElement
+					// since the re-rendering happens during the control renderer APIs are executed here we get the stored focus info before the patching
+					oStoredFocusInfo = oFocusHandler && oFocusHandler.getPatchingControlFocusInfo();
+				}
+
+				// make the Patcher ready for the next patching
+				oPatcher.reset();
 			}
 
 			finalizeRendering(oStoredFocusInfo);
@@ -1177,6 +1359,34 @@ sap.ui.define([
 			}
 		}
 
+		function restoreStyle(oElement, iDomIndex) {
+			var sStyleIndex = oElement.getAttribute(ATTR_STYLE_KEY_MARKER);
+			if (sStyleIndex != iDomIndex) {
+				return 0;
+			}
+
+			oElement.style = aRenderingStyles[iDomIndex];
+			oElement.removeAttribute(ATTR_STYLE_KEY_MARKER);
+			return 1;
+		}
+
+		function restoreStyles(aDomNodes) {
+			if (!aRenderingStyles.length) {
+				return;
+			}
+
+			var iDomIndex = 0;
+			aDomNodes.forEach(function(oDomNode) {
+				if (oDomNode.nodeType == 1 /* Node.ELEMENT_NODE */) {
+					iDomIndex += restoreStyle(oDomNode, iDomIndex);
+					oDomNode.querySelectorAll("[" + ATTR_STYLE_KEY_MARKER + "]").forEach(function(oElement) {
+						iDomIndex += restoreStyle(oElement, iDomIndex);
+					});
+				}
+			});
+			aRenderingStyles = [];
+		}
+
 		/**
 		 * Renders the content of the rendering buffer into the provided DOM node.
 		 *
@@ -1219,7 +1429,7 @@ sap.ui.define([
 				RenderManager.preserveContent(oTargetDomNode);
 			}
 
-			flushInternal(function(sHTML) {
+			flushInternal(function(vHTML) {
 
 				for (var i = 0; i < aRenderedControls.length; i++) {
 					//TODO It would be enough to loop over the controls for which renderControl was initially called but for this
@@ -1235,24 +1445,24 @@ sap.ui.define([
 				}
 				if (typeof vInsert === "number") {
 					if (vInsert <= 0) { // new HTML should be inserted at the beginning
-						jQuery(oTargetDomNode).prepend(sHTML);
+						insertAdjacent(oTargetDomNode, "prepend", vHTML);
 					} else { // new element should be inserted at a certain position > 0
-						var $predecessor = jQuery(oTargetDomNode).children().eq(vInsert - 1); // find the element which should be directly before the new one
-						if ($predecessor.length === 1) {
+						var oPredecessor = oTargetDomNode.children[vInsert - 1]; // find the element which should be directly before the new one
+						if (oPredecessor) {
 							// element found - put the HTML in after this element
-							$predecessor.after(sHTML);
+							insertAdjacent(oPredecessor, "after", vHTML);
 						} else {
 							// element not found (this should not happen when properly used), append the new HTML
-							jQuery(oTargetDomNode).append(sHTML);
+							insertAdjacent(oTargetDomNode, "append", vHTML);
 						}
 					}
 				} else if (!vInsert) {
-					jQuery(oTargetDomNode).html(sHTML); // Put the HTML into the given DOM Node
+					jQuery(oTargetDomNode).html(vHTML); // Put the HTML into the given DOM Node
 				} else {
-					jQuery(oTargetDomNode).append(sHTML); // Append the HTML into the given DOM Node
+					insertAdjacent(oTargetDomNode, "append", vHTML); // Append the HTML into the given DOM Node
 				}
 
-			}, fnDone);
+			}, fnDone, oTargetDomNode);
 
 		};
 
@@ -1288,7 +1498,7 @@ sap.ui.define([
 			// FIXME: MULTIPLE ROOTS
 			// The implementation of this method doesn't support multiple roots for a control.
 			// Affects all places where 'oldDomNode' is used
-			flushInternal(function(sHTML) {
+			flushInternal(function(vHTML) {
 
 				if (oControl && oTargetDomNode) {
 
@@ -1300,15 +1510,6 @@ sap.ui.define([
 
 					var bNewTarget = oldDomNode && oldDomNode.parentNode != oTargetDomNode;
 
-					var fAppend = function(){
-						var jTarget = jQuery(oTargetDomNode);
-						if (oTargetDomNode.innerHTML == "") {
-							jTarget.html(sHTML);
-						} else {
-							jTarget.append(sHTML);
-						}
-					};
-
 					if (bNewTarget) { //Control was rendered already and is now moved to different location
 
 						if (!RenderManager.isPreservedContent(oldDomNode)) {
@@ -1319,21 +1520,22 @@ sap.ui.define([
 							}
 						}
 
-						if (sHTML) {
-							fAppend();
+						if (vHTML) {
+							insertAdjacent(oTargetDomNode, "append", vHTML);
 						}
 
 					} else { //Control either rendered initially or rerendered at the same location
 
-						if (sHTML) {
+						if (vHTML) {
 							if (oldDomNode) {
 								if (RenderManager.isInlineTemplate(oldDomNode)) {
-									jQuery(oldDomNode).html(sHTML);
+									jQuery(oldDomNode).html(vHTML);
 								} else {
-									jQuery(oldDomNode).replaceWith(sHTML);
+									insertAdjacent(oldDomNode, "after", vHTML);
+									jQuery(oldDomNode).remove();
 								}
 							} else {
-								fAppend();
+								insertAdjacent(oTargetDomNode, "append", vHTML);
 							}
 						} else {
 							if (RenderManager.isInlineTemplate(oldDomNode)) {
@@ -1352,7 +1554,7 @@ sap.ui.define([
 					}
 
 				}
-			}, fnDone);
+			}, fnDone, oTargetDomNode);
 		};
 
 		/**
@@ -1388,7 +1590,7 @@ sap.ui.define([
 		/**
 		 * Returns the public interface of the RenderManager which can be used by Renderers.
 		 *
-		 * @return {sap.ui.base.Interface} the interface
+		 * @returns {sap.ui.base.Interface} the interface
 		 * @private
 		 */
 		this.getRendererInterface = function() {
@@ -1405,8 +1607,9 @@ sap.ui.define([
 	/**
 	 * Returns the configuration object
 	 * Shortcut for <code>sap.ui.getCore().getConfiguration()</code>
-	 * @return {sap.ui.core.Configuration} the configuration object
+	 * @returns {sap.ui.core.Configuration} the configuration object
 	 * @public
+	 * @deprecated Since 1.92. Instead, use the {@link sap.ui.core.Core#getConfiguration} API.
 	 */
 	RenderManager.prototype.getConfiguration = function() {
 		return sap.ui.getCore().getConfiguration();
@@ -1423,7 +1626,7 @@ sap.ui.define([
 
 	/**
 	 * @deprecated As of version 1.1, never has been implemented - DO NOT USE
-	 * @return {this} Reference to <code>this</code> in order to allow method chaining
+	 * @returns {this} Reference to <code>this</code> in order to allow method chaining
 	 * @public
 	 */
 	RenderManager.prototype.writeAcceleratorKey = function() {
@@ -1442,8 +1645,10 @@ sap.ui.define([
 	 * Writes the controls data into the HTML.
 	 * Control Data consists at least of the id of a control
 	 * @param {sap.ui.core.Control} oControl the control whose identifying information should be written to the buffer
-	 * @return {this} Reference to <code>this</code> in order to allow method chaining
+	 * @returns {this} Reference to <code>this</code> in order to allow method chaining
 	 * @public
+	 * @deprecated Since 1.92. Instead use {@link sap.ui.core.RenderManager#openStart} or {@link sap.ui.core.RenderManager#voidStart}
+	 *  of the {@link sap.ui.core.RenderManager Semantic Rendering API} and pass the desired control data as the second parameter to the new API.
 	 */
 	RenderManager.prototype.writeControlData = function(oControl) {
 		assert(oControl && BaseObject.isA(oControl, 'sap.ui.core.Control'), "oControl must be an sap.ui.core.Control");
@@ -1455,8 +1660,10 @@ sap.ui.define([
 	 * Writes the elements data into the HTML.
 	 * Element Data consists at least of the id of an element
 	 * @param {sap.ui.core.Element} oElement the element whose identifying information should be written to the buffer
-	 * @return {this} Reference to <code>this</code> in order to allow method chaining
+	 * @returns {this} Reference to <code>this</code> in order to allow method chaining
 	 * @public
+	 * @deprecated Since 1.92. Instead use {@link sap.ui.core.RenderManager#openStart} or {@link sap.ui.core.RenderManager#voidStart}
+	 *  of the {@link sap.ui.core.RenderManager Semantic Rendering API} and pass the desired element data as the second parameter to the new API.
 	 */
 	RenderManager.prototype.writeElementData = function(oElement) {
 		assert(oElement && BaseObject.isA(oElement, 'sap.ui.core.Element'), "oElement must be an sap.ui.core.Element");
@@ -1501,14 +1708,14 @@ sap.ui.define([
 	 * value for the <code>aria-required</code> attribute.
 	 *
 	 * Additionally, the associations <code>ariaDescribedBy</code> and <code>ariaLabelledBy</code> are used to
-	 * determine the lists of IDS for the ARIA attributes <code>aria-describedby</code> and
+	 * determine the lists of IDs for the ARIA attributes <code>aria-describedby</code> and
 	 * <code>aria-labelledby</code>.
 	 *
 	 * Label controls that reference the given element in their <code>labelFor</code> relation are automatically
 	 * added to the <code>aria-labelledby</code> attributes.
 	 *
 	 * Note: This function is only a heuristic of a control property to ARIA attribute mapping. Control developers
-	 * have to check whether it fulfills their requirements. In case of problems (for example the RadioButton has a
+	 * have to check whether it fulfills their requirements. In case of problems (for example the <code>RadioButton</code> has a
 	 * <code>selected</code> property but must provide an <code>aria-checked</code> attribute) the auto-generated
 	 * result of this function can be influenced via the parameter <code>mProps</code> as described below.
 	 *
@@ -1535,8 +1742,9 @@ sap.ui.define([
 	 *            [oElement] The <code>Element</code> whose accessibility state should be rendered
 	 * @param {object}
 	 *            [mProps] A map of additional properties that should be added or changed.
-	 * @return {this} Reference to <code>this</code> in order to allow method chaining
+	 * @returns {this} Reference to <code>this</code> in order to allow method chaining
 	 * @public
+	 * @deprecated Since 1.92. Instead use {@link sap.ui.core.RenderManager#accessibilityState} of the {@link sap.ui.core.RenderManager Semantic Rendering API}.
 	 */
 	RenderManager.prototype.writeAccessibilityState = function(oElement, mProps) {
 		if (!sap.ui.getCore().getConfiguration().getAccessibility()) {
@@ -1655,6 +1863,7 @@ sap.ui.define([
 	 * @param {object} [mAttributes] Additional attributes that will be added to the rendered tag
 	 * @returns {this} Reference to <code>this</code> in order to allow method chaining
 	 * @public
+	 * @deprecated Since 1.92. Instead use {@link sap.ui.core.RenderManager#icon} of the {@link sap.ui.core.RenderManager Semantic Rendering API}.
 	 */
 	RenderManager.prototype.writeIcon = function(sURI, aClasses, mAttributes){
 		var IconPool = sap.ui.requireSync("sap/ui/core/IconPool"),
@@ -1765,7 +1974,7 @@ sap.ui.define([
 	 * Returns the renderer class for a given control instance
 	 *
 	 * @param {sap.ui.core.Control} oControl the control that should be rendered
-	 * @return {object} the renderer class for a given control instance
+	 * @returns {object} the renderer class for a given control instance
 	 * @public
 	 */
 	RenderManager.prototype.getRenderer = function(oControl) {
@@ -1820,7 +2029,7 @@ sap.ui.define([
 	 * @param {sap.ui.core.Control}
 	 *            oControl the control that should be rendered
 	 * @type function
-	 * @return {object} the renderer class for a given control instance
+	 * @returns {object} the renderer class for a given control instance
 	 * @static
 	 * @public
 	 */
@@ -2040,7 +2249,7 @@ sap.ui.define([
 					// a move to the preserveArea will modify the sibling relationship!
 					candidate = next;
 					next = next.nextSibling;
-					if ( candidate.nodeType === 1 /* Node.ELEMENT */ ) {
+					if ( candidate.nodeType === 1 /* Node.ELEMENT_NODE */ ) {
 						check(candidate);
 					}
 				}
@@ -2063,7 +2272,7 @@ sap.ui.define([
 	 * Searches "to-be-preserved" nodes for the given control id.
 	 *
 	 * @param {string} sId control id to search content for.
-	 * @return {jQuery} a jQuery collection representing the found content
+	 * @returns {jQuery} a jQuery collection representing the found content
 	 * @public
 	 * @static
 	 */
@@ -2090,7 +2299,7 @@ sap.ui.define([
 	 * Checks whether the given DOM element is part of the 'preserve' area.
 	 *
 	 * @param {Element} oElement DOM element to check
-	 * @return {boolean} Whether element is part of 'preserve' area
+	 * @returns {boolean} Whether element is part of 'preserve' area
 	 * @private
 	 * @static
 	 */
@@ -2101,7 +2310,7 @@ sap.ui.define([
 	/**
 	 * Returns the hidden area reference belonging to the current window instance.
 	 *
-	 * @return {Element} The hidden area reference belonging to the current window instance.
+	 * @returns {Element} The hidden area reference belonging to the current window instance.
 	 * @public
 	 * @static
 	 */
@@ -2126,7 +2335,7 @@ sap.ui.define([
 	 * Checks whether the given DOM node is an 'inline template' area.
 	 *
 	 * @param {Element} oDomNode dom node which is checked
-	 * @return {boolean} whether node is an 'inline template' area
+	 * @returns {boolean} whether node is an 'inline template' area
 	 * @private
 	 * @static
 	 */
@@ -2140,7 +2349,7 @@ sap.ui.define([
 	 * The inherited <code>apiVersion</code> value is not taken into account, <code>apiVersion</code> must be defined explicitly as an own property of the renderer.
 	 *
 	 * @param {sap.ui.core.Renderer} oRenderer The renderer of the control
-	 * @return {int} API version of the Renderer
+	 * @returns {int} API version of the Renderer
 	 * @private
 	 * @static
 	 */
@@ -2168,6 +2377,10 @@ sap.ui.define([
 		var sId = oElement.getId();
 		oRm.attr("data-sap-ui", sId);
 
+		if (oElement.__slot) {
+			oRm.attr("slot", oElement.__slot);
+		}
+
 		// render custom data
 		oElement.getCustomData().forEach(function(oData) {
 			var oCheckResult = oData._checkWriteToDom(oElement);
@@ -2199,6 +2412,33 @@ sap.ui.define([
 		return this;
 	}
 
+
+
+	/**
+	 * Inserts a given Node or HTML string at a given position relative to the provided HTML element.
+	 *
+	 * <!-- before : beforebegin -->
+	 * <p>
+	 *     <!-- prepend : afterbegin -->
+	 *     foo
+	 *     <!-- append : beforeend -->
+	 * </p>
+	 * <!-- after : afterend -->
+	 *
+	 * @param {HTMLElement} oElement The reference HTML element which the API is invoked upon
+	 * @param {string} sPosition The insertion position "before", "after", "append", "prepend"
+	 * @param {string|Node} vHTMLorNode The Node or HTML string to be inserted
+	 * @private
+	 */
+	var mAdjacentMap = { before: "beforebegin", prepend: "afterbegin", append: "beforeend", after: "afterend" };
+	function insertAdjacent(oElement, sPosition, vHTMLorNode) {
+		if (typeof vHTMLorNode == "string")  {
+			oElement.insertAdjacentHTML(mAdjacentMap[sPosition], vHTMLorNode);
+		} else {
+			oElement[sPosition](vHTMLorNode);
+		}
+	}
+
 	return RenderManager;
 
 }, true);