diff --git a/packages/base/src/sap/ui/webcomponents/base/ControlRenderer.js b/packages/base/src/sap/ui/webcomponents/base/ControlRenderer.js index 8a0c2dc72f22..585f5d1f7212 100644 --- a/packages/base/src/sap/ui/webcomponents/base/ControlRenderer.js +++ b/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); } } diff --git a/packages/base/src/sap/ui/webcomponents/base/Core.js b/packages/base/src/sap/ui/webcomponents/base/Core.js index d9f25375dbec..4c367f2d2e27 100644 --- a/packages/base/src/sap/ui/webcomponents/base/Core.js +++ b/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(); diff --git a/packages/base/src/sap/ui/webcomponents/base/WebComponent.js b/packages/base/src/sap/ui/webcomponents/base/WebComponent.js index 8e0ee4435939..dca622f2c5e2 100644 --- a/packages/base/src/sap/ui/webcomponents/base/WebComponent.js +++ b/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() { diff --git a/packages/base/src/sap/ui/webcomponents/base/compatibility/ShadowDOM.js b/packages/base/src/sap/ui/webcomponents/base/compatibility/ShadowDOM.js index a76c4e164379..4b69e8205376 100644 --- a/packages/base/src/sap/ui/webcomponents/base/compatibility/ShadowDOM.js +++ b/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); diff --git a/packages/main/src/themes/base/Button.less b/packages/main/src/themes/base/Button.less index a7f7e7a1a28d..14a82ea83d1a 100644 --- a/packages/main/src/themes/base/Button.less +++ b/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%; diff --git a/packages/main/src/themes/base/Icon.less b/packages/main/src/themes/base/Icon.less index ddb303cd7e24..06878e58ba64 100644 --- a/packages/main/src/themes/base/Icon.less +++ b/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; } } diff --git a/packages/main/src/themes/base/Label.less b/packages/main/src/themes/base/Label.less index 3ec86afc72be..1eab823b91c2 100644 --- a/packages/main/src/themes/base/Label.less +++ b/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; } -} \ No newline at end of file +} diff --git a/packages/main/src/themes/base/Link.less b/packages/main/src/themes/base/Link.less index 8fd5b97dffd0..6e44f3675543 100644 --- a/packages/main/src/themes/base/Link.less +++ b/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; -} \ No newline at end of file +}