When it comes to modern web applications, there is currently (almost) no way around Angular and React. Of course there are very interesting alternatives such as Vue.js, Ember etc., but in larger projects, they played a considerably smaller role in 2017.
Web Components are a series of features that the W3C is currently adding to the HTML and DOM specifications. Web Components allow you to create reusable components for Web applications, a concept already familiar from Angular and React.
In this post we will take a look at these features and the possibilities they offer.
Example with React
Let’s take as an example a list of strings we want to display. In React it looks like this:
Web Components are also based on Web standards and are therefore more future-proof. However, we must also take into account one disadvantage that Web Components unfortunately currently have: they are not yet available in every browser without difficulty. However, this functionality can be added using Polyfills.
Polyfills allow you to retrofit functions that are not currently supported in the browser. This in turn can mean that the performance does not correspond to the native implementation and is an additional burden for the user, since the respective script must be loaded and executed.
When we talk about Web Components, we refer to four features that we will explore in more detail below:
- HTML Templates: a way to store HTML templates in the document using the
- HTML Imports: possibility to load HTML into other documents
- Shadow DOM: create your own, independent DOM within HTML elements
- Custom Elements: API to write your own HTML elements
In the following we will look at these features. The corresponding code is also on GitHub or can be inserted into an HTML file to see the result in the browser.
HTML Template tag
template element is parsed by the HTML browser and included in the DOM tree, but not rendered on the page.
First we need a
template which we can insert into our HTML file at any place.
In this case it is only a
li-element, which we want to include in a list. For this we need an empty list in the same HTML file:
If we can use HTML templates, we define a list of strings we want to see as li elements in the list. Then we access the template (1) via the DOM API and look for the li element (2) within the template. We need the list to insert the generated li elements (3).
Then we iterate over the previously defined features and write the respective feature into our li element (4), clone the whole thing (5) and insert the clone into the list (6).
Interim Conclusion: Template tags
Currently, Chrome, Edge, Firefox and Safari support HTML Templates. Internet Explorer lacks support. Altogether 89% of users support HTML templates.
The idea behind HTML Imports is to outsource HTML code and load it into the application using the
First we need an HTML file containing the code to import.
In our actual page we only have to reference the file to be imported via a
Interim conclusion: HTML imports
Of course, similar to the previous example, we can manipulate the HTML (but that would be nothing new). HTML imports remove the additional template tags in our document and create a smaller HTML file. In addition, outsourcing allows for reuse in other files. Unfortunately, this feature is not free, as we now have an additional server request for each import. This means that we have to consider things like caching and CORS.
HTML imports are currently only implemented in Chrome and therefore available to about 68% of users. Mozilla is currently not planning to implement HTML imports.
|yes||not planned||not planned||in discussion|
The shadow DOM lets us implement our own DOM within HTML elements and store additional HTML components including styling, for example. The Shadow DOM is independent of the DOM, which simplifies the development of components enormously. Especially the styling is simplified, because CSS rules do not influence each other.
Our HTML is a bit simpler here: we only need one element into which we insert our shadow DOM. This is reminiscent of the established frameworks, which also only need one entry point. The p element below the div serves as an example of styling within the shadow DOM.
As with the other examples, we need to check if we can use the Shadow DOM in the current browser.
Interim conclusion: Shadow DOM
This is a very basic example for the Shadow DOM. It is great that you can create your own DOM with relatively little code and dynamically add HTML code, which can be styled independently. However, the original HTML code does not reflect these changes and thus at first glance it is not obvious where the contents of the page come from.
The Shadow DOM is currently fully implemented in Chrome and (the next) Firefox. It is partially implemented in Safari, so that about 79% of users can use the feature.
|yes||in development (next version)||partial||in discussion|
Custom elements allow you to write your own HTML tags and use them directly in the HTML document.
In the most basic case it could look like this, where we first include our custom element in the HTML code:
To check whether we can use custom elements, the following check is available:
HTMLElement) (1) and use
innerHTML (2) to define what the markup of the component looks like. Important: the super constructor must be called for everything to work.
At the end we register our component as
<web-components> (3). Custom elements must have a dash (-) in their name to work.
The methods that we can use in a custom element are noteworthy.
static get observedAttributes()
|function that returns an array of attributes to be monitored.|
|this function is always called when this element is inserted into the DOM.|
|this function is always called when this element is removed from the DOM.|
attributeChangedCallback(attrName, oldVal, newVal)
|Called when one of the monitored attributes is changed (for example, by an event).|
|is called when the element is moved to another DOM.|
Interim conclusion: Custom elements
Since we use custom elements in our application directly in HTML code, we can integrate them more easily than React and Co. Browser compatibility, however, is a problem without Polyfill.
Custom elements are partially implemented in Chrome and Safari, resulting in a distribution of about 79%.
|yes||in development (next version)||yes||in discussion|
Shadow DOM, HTML Templates und Custom Elements
The previous examples show how each feature works. Only the combination of the individual features makes Web Components possible: We create a template (1) and use this via a shadow DOM (2) in our custom element (3).
In summary it can be said that the technologies presented here cannot yet be used in the project without using Polyfills. With almost 70% distribution, however, a good part of the market is already covered. As soon as the browser manufacturers follow suit, nothing should stand in the way of using them.
The features presented here are low-level APIs, which can only serve as a foundation for other frameworks and libraries. It is conceivable that React will eventually switch to Web Components, or, as Vue.js and Angular already do today, offer libraries with which Web Components can be created (vue-web-component-wrapper, angular elements). Promising frameworks such as stencil.js or Polymer, which simplify the use of Web Components, are also available.
The code examples are also available on auf GitHub.