Components for Standard HTML Elements
Vaadin Flow comes with a set of components for standard HTML elements. Standard HTML components have an API that allows you to set most typical properties and attributes. You can also use the Element API to set any property or attribute, if the component API doesn’t have an appropriate method.
Components that can contain other components thereby implement the HtmlContainer interface to create a hierarchical structure. The Element API allows you to create any standard HTML element using the Element constructor. The ElementFactory class contains factory methods for many standard HTML elements.
The module flow-html-components contains the following components:
| Component | HTML Element | Comments |
|---|---|---|
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
|
|
|
|
|
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
|
Html Component
The Html class in Vaadin Flow allows developers to encapsulate and manage raw HTML fragments in server-side Java applications. This component is particularly useful when you have an HTML snippet — either as a string or loaded from a file — that you want to insert directly into your application’s layout or routes.
The Html class ensures that the HTML fragment is treated as a single unit with exactly one root element, which can be accessed and managed through the server-side code.
Important Considerations
Regarding the Html Component, there are a few things to consider. First, remember that developers are responsible for sanitizing the HTML content before passing it to the Html component. Failure to do so may lead to cross-site scripting (XSS) vulnerabilities, as the raw HTML is sent directly to the client.
Once an Html object is created, the encapsulated HTML fragment cannot be modified. To change the content, a new Html instance must be created.
You also need to know that the Html component doesn’t expand the HTML into a server-side DOM tree. This means that while the root element can be accessed via getElement(), and the inner content via getInnerHtml(), you can’t traverse or manipulate the DOM structure on the server side.
Also, the HTML fragment must have exactly one root element. If the fragment contains multiple root elements, an IllegalArgumentException is thrown.
Last thing to consider is that the Html component doesn’t support SVG elements as a root node. For SVG content, the Svg component should be used instead.
6774751B-921E-4B79-941E-830D9C3532B4