fix: do not modify the HTML tag (#49)

Author: vladitasev

packages/base/src/sap/ui/webcomponents/base/ControlRenderer.js

@@ -10,12 +10,12 @@ class ControlRenderer {
 		// const oldCounter = window.renderStats.get(control.tagName) || 0;
 		// window.renderStats.set(control.tagName, oldCounter + 1);
 
-		const placeholder = control._getPlaceholder();
+		const root = control._getRoot();
 		const templateContext = control._getTemplateContext();
 		const renderer = Object.getPrototypeOf(control).constructor.renderer.render;
 		const renderResult = renderer(templateContext);
 
-		RendererImpl.render(renderResult, placeholder);
+		RendererImpl.render(renderResult, root);
 	}
 
 }

packages/base/src/sap/ui/webcomponents/base/Core.js

@@ -1,8 +1,5 @@
 import ShadowDOM from './compatibility/ShadowDOM';
 import whenDOMReady from './util/whenDOMReady';
-import setupBrowser from './util/setupBrowser';
-import setupOS from './util/setupOS';
-import setupSystem from './util/setupSystem';
 import configuration from "./Configuration";
 import { inject as injectCore } from "@ui5/webcomponents-core/dist/sap/ui/core/Core";
 import "./jquery-shim";
@@ -64,13 +61,8 @@ const Core = {
 			whenDOMReady().then(function() {
 
 				// This will only have effect if the polyfill is loaded
-				ShadowDOM.setWebComponentRootOnHTML();
 				attachThemeChange(ShadowDOM._applyTheme);
 
-				setupBrowser(document.documentElement);
-				setupOS(document.documentElement);
-				setupSystem(document.documentElement);
-
 				IconFonts.load();
 				DOMEventHandler.start();
 				resolve();

packages/base/src/sap/ui/webcomponents/base/WebComponent.js

@@ -411,15 +411,15 @@ class WebComponent extends HTMLElement {
 			return;
 		}
 
-		return this._getPlaceholder().children[0];
+		return this._getRoot().children[0];
 	}
 
 	_waitForDomRef() {
 		return this._domRefReadyPromise;
 	}
 
-	_getPlaceholder() {
-		return this.shadowRoot.querySelector("[data-sap-ui-wc-placeholder]");
+	_getRoot() {
+		return this.shadowRoot.querySelector("[data-sap-ui-wc-root]");
 	}
 
 	getFocusDomRef() {

packages/base/src/sap/ui/webcomponents/base/compatibility/ShadowDOM.js

@@ -25,13 +25,7 @@ class ShadowDOM {
 	constructor() {
 		throw new Error("Static class");
 	}
-
-	static setWebComponentRootOnHTML() {
-		if (window.ShadyDOM) {
-			document.documentElement.setAttribute("data-sap-ui-wc-root", "");
-		}
-	}
-
+	
 	static registerStyle(theme, styleName, styleObj) {
 		if (typeof(styleObj) === "object" && styleObj._) {
 			if (!styles.has(theme)) {
@@ -78,7 +72,7 @@ class ShadowDOM {
 
 				// Create the shadow DOM root span
 				rootSpan = d.createElement("span");
-				rootSpan.setAttribute("data-sap-ui-wc-placeholder", "");
+				rootSpan.setAttribute("data-sap-ui-wc-root", "");
 				shadowDOM = rootSpan;
 			} else {
 				let template = this._getTemplateFor(theme, tag);
@@ -90,12 +84,13 @@ class ShadowDOM {
 				}
 				shadowDOM = template.content.cloneNode(true);
 
-				rootSpan = shadowDOM.querySelector("span[data-sap-ui-wc-placeholder]");
-				setupBrowser(rootSpan);
-				setupOS(rootSpan);
-				setupSystem(rootSpan);
+				rootSpan = shadowDOM.querySelector("span[data-sap-ui-wc-root]");
 			}
 
+			setupBrowser(rootSpan);
+			setupOS(rootSpan);
+			setupSystem(rootSpan);
+
 			if (isCompact) {
 				rootSpan.classList.add("sapUiSizeCompact");
 			}
@@ -212,7 +207,6 @@ class ShadowDOM {
 
 		// Create a root span
 		let root = d.createElement("span");
-		root.setAttribute("data-sap-ui-wc-placeholder", "");
 		root.setAttribute("data-sap-ui-wc-root", "");
 
 		template.content.appendChild(root);

packages/main/src/themes/base/Button.less

@@ -41,7 +41,7 @@ span[dir="rtl"] {
 	}
 }
 
-span[data-sap-ui-wc-placeholder] {
+span[data-sap-ui-wc-root] {
 	display: inline-block;
 	width: 100%;
 	height: 100%;

packages/main/src/themes/base/Icon.less

@@ -22,7 +22,7 @@ ui5-icon {
 
 	// workaround for IE
 	// pressing on the span does not propagate active state to the web component
-	& span[data-sap-ui-wc-placeholder] {
+	& span[data-sap-ui-wc-root] {
 		pointer-events: none;
 	}
 }

packages/main/src/themes/base/Label.less

@@ -15,7 +15,7 @@
 	cursor: text;
 	max-width: 100%;
 
-	& span[data-sap-ui-wc-placeholder] {
+	& span[data-sap-ui-wc-root] {
 		display: flex;
 	}
 }
@@ -25,7 +25,7 @@ ui5-label {
 	cursor: text;
 	max-width: 100%;
 
-	& span[data-sap-ui-wc-placeholder] {
+	& span[data-sap-ui-wc-root] {
 		display: flex;
 	}
 }
@@ -57,4 +57,4 @@ ui5-label {
 		display: inline-flex;
 		align-items: flex-start;
 	}
-}
+}

packages/main/src/themes/base/Link.less

@@ -14,7 +14,7 @@ ui5-link {
 	display: inline-block;
 	max-width: 100%;
 
-	& span[data-sap-ui-wc-placeholder] {
+	& span[data-sap-ui-wc-root] {
 		display: flex;
 	}
 }
@@ -82,4 +82,4 @@ ui5-link {
 .sapMLnk.sapMLnkWrapping {
 	white-space: normal;
 	word-wrap: break-word;
-}
+}