diff --git a/packages/base/hash.txt b/packages/base/hash.txt index c1dc2180a871..f18e27bfe7c5 100644 --- a/packages/base/hash.txt +++ b/packages/base/hash.txt @@ -1 +1 @@ -Z2/FFhMi1aIykMRZ/8bE3YIatok= \ No newline at end of file +THl/rR2+CTzuEgv48kxhYOHQdU4= \ No newline at end of file diff --git a/packages/base/src/StaticAreaItem.js b/packages/base/src/StaticAreaItem.js index 76272eaec827..508c4ad90335 100644 --- a/packages/base/src/StaticAreaItem.js +++ b/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; diff --git a/packages/base/src/UI5Element.js b/packages/base/src/UI5Element.js index 16ef1674f2f4..cd3cc1b5fb39 100644 --- a/packages/base/src/UI5Element.js +++ b/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) { diff --git a/packages/fiori/src/Wizard.js b/packages/fiori/src/Wizard.js index 62ebd724ec5e..2c85ef6c7a39 100644 --- a/packages/fiori/src/Wizard.js +++ b/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; diff --git a/packages/fiori/src/themes/WizardTab.css b/packages/fiori/src/themes/WizardTab.css index 137573b95e0c..da93b425b06c 100644 --- a/packages/fiori/src/themes/WizardTab.css +++ b/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; } diff --git a/packages/ie11/hash.txt b/packages/ie11/hash.txt index 756260509a68..0ae69224046a 100644 --- a/packages/ie11/hash.txt +++ b/packages/ie11/hash.txt @@ -1 +1 @@ -xVuUgxGGvkAKIY1Yw5I2hbPgG24= \ No newline at end of file +W5PC928lrjsUvm6BzHaYc00TH0o= \ No newline at end of file diff --git a/packages/ie11/src/theming/createComponentStyleTag.js b/packages/ie11/src/theming/createComponentStyleTag.js index e29ab34cf85e..ec89d8bb3479 100644 --- a/packages/ie11/src/theming/createComponentStyleTag.js +++ b/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}`; }