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 an 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.