Building custom HTML elements with web components
Frontend Team Lead
Imagine building reusable, encapsulated HTML elements, without any framework! With web components, we can certainly create it!
What are Web components?
Web components are a set of web platform APIs that allows to create custom, reusable and encapsulated HTML elements that can be used in any document or web app. Web components consist of 3 different technologies.
- HTML templates, is used to declare markup that goes unused at page load, but it can be instantiated later at runtime.
Custom elements are the foundation of web components. With the CustomElemets API, we are creating new HTML elements based on desired behavior and logic.
Constructing a custom element is similar to construct a component in Vue, React or insert-flavor-of-the-week framework, but without the need for a framework. These custom elements can be used in any document, both directly in HTML or in web applications. Another advantage of using web components, since these custom elements are supported by browsers, is that they don’t become obsolete (in contrast to SPA framework).
Additionally, extending HTMLElement allows access to the API used by HTML elements, for example, lifecycle events. In the exposed case, lifecycle event connectedCallback is executed when the component is inserted into the DOM. connectedCallback is the right location for adding initial content to elements or fetching data to be rendered in a component.
NOTE: A custom element always has a dash in the tag name, for example my-component, hello-world or whats-up. Browser vendors have bound not to use dashes in HTML tags, to avoid conflicts in tag name.
With HTML templates, we define HTML that will be instantiated later at runtime.
Start with fetching the template from the DOM, next copy the template to the node variable using importNode and at the end insert the newly created node into the DOM.
The importNode copies the template's content and in consequence it can be reused in several places for a document. After being executed, the DOM is similar to:
A great aspect about templates is the possibility to include any HTML, style or scripts. As a result templates are a good location for styling our component:
The DOM (Document Object Model) represents the structure of the HTML document. The DOM has a tree structure that models a document with a parent-children relationship.
The DOM API has absent support for encapsulation. This characteristic makes it difficult to create reusable, encapsulated custom elements.
Aside from encapsulation, the API for the DOM and the shadow DOM work similarly. Furthermore functions like querySelector, textContent, getElementById etc. from the API can still be used.
After we render our component the final result of the DOM is outlined as in the present example.
Without using any SPA framework, we are able to create encapsulated, reusable web components that are a great benefit to worldwide users.
Considering that web development becomes increasingly complex, it’s reasonable to invest more development in the web platform. From this perspective, I believe web components are a great complement to SPA frameworks such as Vue and React. They don’t substitute each other, but it’s very suitable to build these custom HTML elements without any framework.
Thanks for reading!
Originally published at https://dev.to on November 29, 2020.