1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
|
---
title: Introduction
order: 1
layout: page
---
# Vaadin Core Elements
## Introduction
Vaadin Core Elements is a free and open source set of high quality link:http://webcomponents.org[Web Components] for building mobile and desktop web applications in modern browsers. It builds on top of Google’s link:http://www.polymer-project.org[Polymer] library, and augments the link:https://elements.polymer-project.org[Iron, Paper, and other element sets of Polymer] with elements that are needed in building business applications.
Although based on Polymer, Vaadin Elements can be used together with any other web framework that has support for Web Components. See the link:integrations/polymer.html[Integrations] section for examples how to use the elements together with different JavaScript frameworks and libraries, such as Angular 2, React and Vue.js.
If you wish to use Vaadin elements with link:http://gwtproject.org[GWT], you can use link:https://vaadin.com/gwt[GWT Polymer Elements].
Vaadin Core Elements includes the following elements:
- link:/docs/-/part/elements/vaadin-combo-box/vaadin-combo-box-overview.html[Combo Box]
- link:/docs/-/part/elements/vaadin-date-picker/vaadin-date-picker-overview.html[Date Picker]
- link:/docs/-/part/elements/vaadin-grid/vaadin-grid-overview.html[Grid]
- link:/docs/-/part/elements/vaadin-upload/vaadin-upload-overview.html[Upload]
- link:/docs/-/part/elements/vaadin-icons/vaadin-icons-overview.html[Icons]
Learn more about the benefits of using Vaadin elements from the link:https://vaadin.com/elements[Vaadin Elements page].
## Background
### Web Components
Web Components is a collection of HTML standards (under development, April 2016), which together provide web developers the tools to extend the native web platform with similar tools as the browser vendors have been using for creating the built-in standard elements, such as [elementname]#video#, [elementname]#input type="date"#, and so on.
The four specifications that together form Web Components are:
*Template element*::
"The HTML template element [elementname]#template# is a mechanism for holding client-side content that is not rendered when a page is loaded. But it may be instantiated in runtime"
*Shadow DOM*::
"Shadow DOM provides encapsulation for the JavaScript, CSS, and templating in a Web Component. Shadow DOM allows keeping them separate from the DOM of the main document."
"Why would you want to keep some code separate from the rest of the page? One reason is that on a large site, for example, if the CSS is not carefully organized, the styling for the navigation can "leak" into the main content area where it was not intended to go, or vice-versa. As a site or an app scales, this kind of thing becomes difficult to avoid."
*HTML Imports*::
"HTML Imports is a way to include HTML documents in other HTML documents. You're not limited to markup either. An import can also include CSS, JavaScript, or anything else an .html file can contain. In other words, this makes imports a fantastic tool for loading related HTML/CSS/JS."
*Custom Elements*::
"Custom Elements allow web developers to define new types of HTML elements. It's quite possibly the most important as Web Components don't exist without the features unlocked by custom elements."
Descriptions provided by link:https://developer.mozilla.org/en-US/[MDN] and link:http://www.html5rocks.com/en/[HTML5 Rocks].
link:http://webcomponents.org[Learn more about Web Components]
### Polymer
The Polymer library is designed to make it easier and faster for developers to create great, reusable components for the modern web.
It provides a declarative syntax that makes it simpler to define custom elements, and adds features like templating, two-way data binding, and property observation to help you build powerful, reusable elements with less code.
The Polymer team also builds and maintains a large collection of custom elements, and the most prominent one is the Paper collection. The Paper elements are Google’s reference implementation of Material Design for the web.
link:https://www.polymer-project.org[Learn more about Polymer]
link:https://elements.polymer-project.org[Browse Polymer Element Catalog]
## Browser compatibility
The standards of Web Components are on the cutting-edge of web technologies and as such they are not yet fully supported in all browsers. Vaadin elements rely on polyfills to fill the gap and can therefore support the latest versions of all major browsers.
The current set of supported browsers for Vaadin Core Elements is listed on the table below:
|===
| IE / Edge | Firefox | Chrome, desktop | Chrome, Android | Safari, OS X | Safari, iOS
| IE11 / Latest | Latest | Latest | Latest | iOS 8+ | Latest
|===
See also
- link:http://webcomponents.org/[Native Web Components support]
- link:https://github.com/WebComponents/webcomponentsjs#browser-support[Browser support of webcomponents.js polyfill]
- link:https://www.polymer-project.org/1.0/resources/compatibility.html[Browser support of Polymer]
## Framework support
You can use Vaadin elements together with any JavaScript framework or library which has support for Web Components.
Example integrations for some popular frameworks and libraries:
- link:/docs/-/part/elements/elements-getting-started.html[Polymer]
- link:/docs/-/part/elements/angular2-polymer/overview.html[Angular 2]
- link:/docs/-/part/elements/integrations/integrations-react.html[React]
- link:/docs/-/part/elements/integrations/integrations-vuejs.html[Vue.js]
+++
<!-- Assumes .w-arrow-button and .blue class names from vaadin.com theme. Will fallback to a plain link. -->
<a href="elements-getting-started.html" class="w-arrow-button blue" style="display: inline-block">
Getting Started<br />
<small>How to setup a Vaadin elements project</small>
</a>
+++
|
