Frequently Asked Questions

Q: How can I play with UI5 Web Components easily?

A: Use this CodeSandBox.

Q: Where is the documentation?

A: There are several resources:

Q: Is there a CDN to load UI5 Web Components from?

A: No. The best practice is to build your own bundle. See this article for details.

Q: Are UI5 Web Components APIs stable?

A: Mostly yes since the project is in Release Candidate state, but minor changes may still be expected until the official release.

Q: Can I create my own UI5 Web Components?

A: Yes, for more information see Creating a custom UI5 Web Components package

Q: How big is the runtime?

A: Currently on master, a simple working Web Component (ui5-label) and its dependencies equals to around 22K gzipped. Two simple web components (ui5-label and ui5-icon) and their dependencies equal to around 25K gzipped.

Note: The quoted numbers include only a <ui5-label> (respectively ui5-label and ui5-icon) working on Chrome/FF/Safari with the default settings (theme/language). Additional features, settings and old browser support will increase bundle size accordingly.

Q: What is the difference between UI5 Web Components and OpenUI5? A: See the project’s readme.md for more on this.

Q: Can I use UI5 Web Components in a OpenUI5 application? A: This is not necessary as OpenUI5 already provides equivalents in the form of UI5 Controls.

Q: How can I hide not yet upgraded Web Components so that users don’t see them until styled? A: You can place a CSS rule such as:

*:not(:defined) {
	display: none;
}

or:

*:not(:defined) {
	visibility: hidden;
}

in your application, depending on your preference.

The selector *:not(:defined) will match all web components that haven’t been defined yet.

Alternatively, you could only apply this rule for selected web components:

ui5-button:not(:defined), ui5-label:not(:defined) {
	display: none;
}

Please note that the :defined CSS pseudo-selector is not supported by the Edge and Internet Explorer 11 browsers.