feat(ui5-static-area-item): StaticAreaItem can now be scoped (#3076)

Author: vladitasev

packages/base/hash.txt

@@ -1 +1 @@
-Z2/FFhMi1aIykMRZ/8bE3YIatok=
+THl/rR2+CTzuEgv48kxhYOHQdU4=

packages/base/src/StaticAreaItem.js

@@ -2,6 +2,7 @@ import "./StaticArea.js";
 import updateShadowRoot from "./updateShadowRoot.js";
 import { renderFinished } from "./Render.js";
 import getEffectiveContentDensity from "./util/getEffectiveContentDensity.js";
+import { getEffectiveScopingSuffixForTag } from "./CustomElementsScope.js";
 
 /**
  *
@@ -72,10 +73,24 @@ class StaticAreaItem extends HTMLElement {
 	getStableDomRef(refName) {
 		return this.shadowRoot.querySelector(`[data-ui5-stable=${refName}]`);
 	}
-}
 
-if (!customElements.get("ui5-static-area-item")) {
-	customElements.define("ui5-static-area-item", StaticAreaItem);
+	static getTag() {
+		const pureTag = "ui5-static-area-item";
+		const suffix = getEffectiveScopingSuffixForTag(pureTag);
+		if (!suffix) {
+			return pureTag;
+		}
+
+		return `${pureTag}-${suffix}`;
+	}
+
+	static createInstance() {
+		if (!customElements.get(StaticAreaItem.getTag())) {
+			customElements.define(StaticAreaItem.getTag(), StaticAreaItem);
+		}
+
+		return document.createElement(this.getTag());
+	}
 }
 
 export default StaticAreaItem;

packages/base/src/UI5Element.js

@@ -3,7 +3,7 @@ import { boot } from "./Boot.js";
 import UI5ElementMetadata from "./UI5ElementMetadata.js";
 import EventProvider from "./EventProvider.js";
 import getSingletonElementInstance from "./util/getSingletonElementInstance.js";
-import "./StaticAreaItem.js";
+import StaticAreaItem from "./StaticAreaItem.js";
 import updateShadowRoot from "./updateShadowRoot.js";
 import { renderDeferred, renderImmediately, cancelRender } from "./Render.js";
 import { registerTag, isTagRegistered, recordTagRegistrationFailure } from "./CustomElementsRegistry.js";
@@ -796,7 +796,7 @@ class UI5Element extends HTMLElement {
 		}
 
 		if (!this.staticAreaItem) {
-			this.staticAreaItem = document.createElement("ui5-static-area-item");
+			this.staticAreaItem = StaticAreaItem.createInstance();
 			this.staticAreaItem.setOwnerElement(this);
 		}
 		if (!this.staticAreaItem.parentElement) {

packages/fiori/src/Wizard.js

@@ -485,7 +485,7 @@ class Wizard extends UI5Element {
 		const iCurrStep = this.getSelectedStepIndex();
 		const iStepsToShow = this.steps.length ? Math.floor(iWidth / MIN_STEP_WIDTH_WITH_TITLE) : Math.floor(iWidth / MIN_STEP_WIDTH_NO_TITLE);
 
-		const tabs = this.shadowRoot.querySelectorAll("ui5-wizard-tab");
+		const tabs = this.shadowRoot.querySelectorAll("[ui5-wizard-tab]");
 
 		if (!tabs.length) {
 			return;
@@ -564,7 +564,7 @@ class Wizard extends UI5Element {
 	}
 
 	async _showPopover(oDomTarget, bAtStart) {
-		const tabs = Array.from(this.shadowRoot.querySelectorAll("ui5-wizard-tab"));
+		const tabs = Array.from(this.shadowRoot.querySelectorAll("[ui5-wizard-tab]"));
 		this._groupedTabs = [];
 
 		const iFromStep = bAtStart ? 0 : this.stepsInHeaderDOM.indexOf(oDomTarget);
@@ -589,7 +589,7 @@ class Wizard extends UI5Element {
 	}
 
 	_onOverflowStepButtonClick(event) {
-		const tabs = Array.from(this.shadowRoot.querySelectorAll("ui5-wizard-tab"));
+		const tabs = Array.from(this.shadowRoot.querySelectorAll("[ui5-wizard-tab]"));
 		const stepRefId = event.target.getAttribute("data-ui5-header-tab-ref-id");
 		const stepToSelect = this.slottedSteps[stepRefId - 1];
 		const selectedStep = this.selectedStep;

packages/fiori/src/themes/WizardTab.css

@@ -1,5 +1,5 @@
 :host(:not([hidden])) {
-	/* Well known worakround to allow shrinking inside flex containers 
+	/* Well known worakround to allow shrinking inside flex containers
 	 * and shrinking is needed so the texts trucnate properly.
 	 */
 	min-width: 1px;
@@ -146,7 +146,7 @@
 }
 
 /* Workaround for IE to make the focus outline visible */
-ui5-wizard-tab .ui5-wiz-step-main {
+[ui5-wizard-tab] .ui5-wiz-step-main {
 	pointer-events: none;
 }
 

packages/ie11/hash.txt

@@ -1 +1 @@
-xVuUgxGGvkAKIY1Yw5I2hbPgG24=
+W5PC928lrjsUvm6BzHaYc00TH0o=

packages/ie11/src/theming/createComponentStyleTag.js

@@ -1,6 +1,7 @@
 import createStyleInHead from "@ui5/webcomponents-base/dist/util/createStyleInHead.js";
 import getEffectiveStyle from "@ui5/webcomponents-base/dist/theming/getEffectiveStyle.js";
 import { attachCustomCSSChange } from "@ui5/webcomponents-base/dist/theming/CustomStyle.js";
+import StaticAreaItem from "@ui5/webcomponents-base/dist/StaticAreaItem.js";
 import adaptCSSForIE from "./adaptCSSForIE.js";
 import { schedulePonyfill } from "./CSSVarsPonyfill.js";
 
@@ -29,7 +30,7 @@ const createComponentStyleTag = component => {
 	// Append static CSS, if any, for IE
 	let staticCssContent = getEffectiveStyle(ElementClass, true);
 	if (staticCssContent) {
-		staticCssContent = adaptCSSForIE(staticCssContent, "ui5-static-area-item");
+		staticCssContent = adaptCSSForIE(staticCssContent, StaticAreaItem.getTag());
 		cssContent = `${cssContent} ${staticCssContent}`;
 	}