refactor: remove placeholder span from shadow root (#503)

Author: vladitasev

packages/base/src/CSS.js

@@ -1,44 +1,56 @@
 import { getTheme } from "./Configuration.js";
 import { getEffectiveStyle } from "./Theming.js";
+import { injectWebComponentStyle } from "./theming/StyleInjection.js";
 
 const styleMap = new Map();
 
-const createStyleElement = css => {
-	// Create a local <style> tag for the real shadow DOM
-	const style = document.createElement("style");
-	style.innerHTML = css;
-	return style;
-};
-
-const createConstructableStyleSheet = css => {
-	const elementStyleSheet = new CSSStyleSheet();
-	elementStyleSheet.replaceSync(css);
-	return elementStyleSheet;
+/**
+ * Creates the needed CSS for a web component class in the head tag
+ * Note: IE11, Edge
+ * @param ElementClass
+ */
+const createHeadStyle = ElementClass => {
+	const tag = ElementClass.getMetadata().getTag();
+	const cssContent = getEffectiveStyle(ElementClass);
+	injectWebComponentStyle(tag, cssContent);
 };
 
-const _createStyle = (tagName, styleContent) => {
+/**
+ * Returns (and caches) a constructable style sheet for a web component class
+ * Note: Chrome
+ * @param ElementClass
+ * @returns {*}
+ */
+const getConstructableStyle = ElementClass => {
+	const tagName = ElementClass.getMetadata().getTag();
+	const styleContent = getEffectiveStyle(ElementClass);
 	const theme = getTheme();
 	const key = theme + tagName;
 	if (styleMap.has(key)) {
 		return styleMap.get(key);
 	}
 
-	let style;
-	if (document.adoptedStyleSheets) {
-		style = createConstructableStyleSheet(styleContent);
-	} else {
-		style = createStyleElement(styleContent);
-	}
+	const style = new CSSStyleSheet();
+	style.replaceSync(styleContent);
 
 	styleMap.set(key, style);
 	return style;
 };
 
-const createStyle = ElementClass => {
-	const tagName = ElementClass.getMetadata().getTag();
+/**
+ * Returns the CSS to be injected inside a web component shadow root, or undefined if not needed
+ * Note: FF, Safari
+ * @param ElementClass
+ * @returns {string}
+ */
+const getShadowRootStyle = ElementClass => {
+	if (document.adoptedStyleSheets || window.ShadyDOM) {
+		return;
+	}
+
 	const styleContent = getEffectiveStyle(ElementClass);
-	return _createStyle(tagName, styleContent);
+	return styleContent;
 };
 
 // eslint-disable-next-line
-export { createStyle };
+export { createHeadStyle, getConstructableStyle, getShadowRootStyle};

packages/base/src/Renderer.js

@@ -1,14 +1,18 @@
 import LitRenderer from "./renderer/LitRenderer.js";
+import { getShadowRootStyle } from "./CSS.js";
 
 const RendererImpl = LitRenderer;
 
 class Renderer {
 	static render(element) {
-		const root = element._getRoot();
-		const renderer = Object.getPrototypeOf(element).constructor.renderer.render;
-		const renderResult = renderer(element);
+		const root = element.shadowRoot;
+		const { render } = Object.getPrototypeOf(element).constructor.renderer;
+		const renderResult = render(element);
 
-		RendererImpl.render(renderResult, root, { eventContext: element });
+		// For browsers that do not support constructable style sheets (and not using the polyfill)
+		const styleToPrepend = getShadowRootStyle(element.constructor);
+
+		RendererImpl.render(renderResult, root, element, styleToPrepend);
 	}
 }
 

packages/base/src/UI5Element.js

@@ -1,11 +1,10 @@
 import { getWCNoConflict, getCompactSize } from "./Configuration.js";
 import DOMObserver from "./compatibility/DOMObserver.js";
-import ShadowDOM from "./compatibility/ShadowDOM.js";
 import UI5ElementMetadata from "./UI5ElementMetadata.js";
 import Integer from "./types/Integer.js";
 import Renderer from "./Renderer.js";
 import RenderScheduler from "./RenderScheduler.js";
-import { createStyle } from "./CSS.js";
+import { getConstructableStyle, createHeadStyle } from "./CSS.js";
 import { attachThemeChange } from "./Theming.js";
 
 const metadata = {
@@ -44,7 +43,7 @@ class UI5Element extends HTMLElement {
 			// polyfill theme handling is in head styles directly
 			return;
 		}
-		const newStyle = createStyle(this.constructor);
+		const newStyle = getConstructableStyle(this.constructor);
 		if (document.adoptedStyleSheets) {
 			this.shadowRoot.adoptedStyleSheets = [newStyle];
 		} else {
@@ -69,11 +68,15 @@ class UI5Element extends HTMLElement {
 		}
 
 		this.attachShadow({ mode: "open" });
-		const shadowDOM = await ShadowDOM.prepareShadowDOM(this.constructor);
-		this.shadowRoot.appendChild(shadowDOM);
 
+		// IE11, Edge
+		if (window.ShadyDOM) {
+			createHeadStyle(this.constructor);
+		}
+
+		// Chrome
 		if (document.adoptedStyleSheets) {
-			const style = createStyle(this.constructor);
+			const style = getConstructableStyle(this.constructor);
 			this.shadowRoot.adoptedStyleSheets = [style];
 		}
 	}
@@ -467,17 +470,14 @@ class UI5Element extends HTMLElement {
 			return;
 		}
 
-		return this._getRoot().children[0];
+		return this.shadowRoot.children.length === 1
+			? this.shadowRoot.children[0] : this.shadowRoot.children[1];
 	}
 
 	_waitForDomRef() {
 		return this._domRefReadyPromise;
 	}
 
-	_getRoot() {
-		return this.shadowRoot.querySelector("[data-sap-ui-wc-root]");
-	}
-
 	getFocusDomRef() {
 		const domRef = this.getDomRef();
 		if (domRef) {

packages/base/src/compatibility/ShadowDOM.js

@@ -1,8 +1,18 @@
-import { render } from "lit-html";
+import { html, render } from "lit-html";
 
 class LitRenderer {
-	static render(renderResult, domNode, options) {
-		render(renderResult, domNode, options);
+	/**
+	 * Renders "templateResult" by replacing the content of "domNode", and optionally prepends a style tag containing "styles"
+	 * @param templateResult - lit template result object
+	 * @param domNode - the node whose content will be replaced
+	 * @param eventContext - the context of events, bound via the template
+	 * @param styles - if given, will be prepended in a style tag
+	 */
+	static render(templateResult, domNode, eventContext, styles) {
+		if (styles) {
+			templateResult = html`<style data-ui5-shadow-root-styles>${styles}</style>${templateResult}`;
+		}
+		render(templateResult, domNode, { eventContext });
 	}
 }
 

packages/base/src/renderer/LitRenderer.js

@@ -5,6 +5,7 @@
 		aria-disabled="{{ariaDisabled}}"
 		data-sap-focus-ref
 		{{> ariaPressed}}
+		dir="{{rtl}}"
 	>
 		{{#if icon}}
 			<ui5-icon

packages/main/src/Button.hbs

@@ -1,6 +1,8 @@
 import UI5Element from "@ui5/webcomponents-base/src/UI5Element.js";
 import Bootstrap from "@ui5/webcomponents-base/src/Bootstrap.js";
 import { isSpace, isEnter } from "@ui5/webcomponents-base/src/events/PseudoEvents.js";
+import { getCompactSize } from "@ui5/webcomponents-base/src/Configuration.js";
+import getEffectiveRTL from "@ui5/webcomponents-base/src/util/getEffectiveRTL.js";
 import ButtonType from "./types/ButtonType.js";
 import ButtonRenderer from "./build/compiled/ButtonRenderer.lit.js";
 import Icon from "./Icon.js";
@@ -252,6 +254,7 @@ class Button extends UI5Element {
 				sapMBtnDisabled: this.disabled,
 				sapMBtnIconEnd: this.iconEnd,
 				[`sapMBtn${this.type}`]: true,
+				sapUiSizeCompact: getCompactSize(),
 			},
 			icon: {
 				sapWCIconInButton: true,
@@ -266,6 +269,10 @@ class Button extends UI5Element {
 		return this.disabled ? "true" : undefined;
 	}
 
+	get rtl() {
+		return getEffectiveRTL() ? "rtl" : undefined;
+	}
+
 	static async define(...params) {
 		await Icon.define();
 

packages/main/src/Button.js

@@ -1,5 +1,7 @@
 <div
-	class="{{classes.main}}">
+	class="{{classes.main}}"
+	dir="{{rtl}}"
+>
 
 	<ui5-icon id="{{_id}}-btnPrev"
 		class="{{classes.buttons}}"

packages/main/src/CalendarHeader.hbs

@@ -1,6 +1,8 @@
 import UI5Element from "@ui5/webcomponents-base/src/UI5Element.js";
 import Bootstrap from "@ui5/webcomponents-base/src/Bootstrap.js";
 import { isSpace, isEnter } from "@ui5/webcomponents-base/src/events/PseudoEvents.js";
+import { getCompactSize } from "@ui5/webcomponents-base/src/Configuration.js";
+import getEffectiveRTL from "@ui5/webcomponents-base/src/util/getEffectiveRTL.js";
 import Button from "./Button.js";
 import ButtonType from "./types/ButtonType.js";
 import CalendarHeaderRenderer from "./build/compiled/CalendarHeaderRenderer.lit.js";
@@ -123,6 +125,7 @@ class CalendarHeader extends UI5Element {
 		return {
 			main: {
 				sapWCCalHead: true,
+				sapUiSizeCompact: getCompactSize(),
 			},
 			buttons: {
 				sapWCCalHeadArrowButton: true,
@@ -134,6 +137,10 @@ class CalendarHeader extends UI5Element {
 		};
 	}
 
+	get rtl() {
+		return getEffectiveRTL() ? "rtl" : undefined;
+	}
+
 	static async define(...params) {
 		await Button.define();
 

packages/main/src/CalendarHeader.js

@@ -1,4 +1,7 @@
-<div class="{{classes.main}}">
+<div
+	class="{{classes.main}}"
+	dir="{{rtl}}"
+>
 	<header class="{{classes.header}}"
 		@click="{{_headerClick}}"
 		@keydown="{{_headerKeydown}}"