feat: add data-ui5-compact-size attribute to root when compact is set (…

…#382)

- in order to have easier styling of the sizes of the components all the css
should be applied to the root of the element (such as width, height, etc).
- when having a compact size setting applied, all components should change their sizes, in
order to track this change in the css we add a private data attribute to the root of each element

packages/base/src/UI5Element.js

@@ -1,4 +1,4 @@
-import { getWCNoConflict } from "./Configuration.js";
+import { getWCNoConflict, getCompactSize } from "./Configuration.js";
 import DOMObserver from "./compatibility/DOMObserver.js";
 import ShadowDOM from "./compatibility/ShadowDOM.js";
 import UI5ElementMetadata from "./UI5ElementMetadata.js";
@@ -78,6 +78,12 @@ class UI5Element extends HTMLElement {
 	}
 
 	async _initializeShadowRoot() {
+		const isCompact = getCompactSize();
+
+		if (isCompact) {
+			this.setAttribute("data-ui5-compact-size", "");
+		}
+
 		if (this.constructor.getMetadata().getNoShadowDOM()) {
 			return Promise.resolve();
 		}