Building custom HTML elements with web components
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).
HTMLElement and define the class with a tag name. A fundamental version of a custom element:
HTMLElement allowing the component to be registered by the browser. It’s important to define the custom HTML element with a tag in order to use it from the document. Defining a tag is achieved with
customElements.define('hello-world', HelloWorld). After fulfilling these steps, we have built a custom element, ready to be used in any document by simply writing
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
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.
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
getElementById etc. from the API can still be used.
This exemplifies how shadow DOM is attached to the root of a custom element with
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!
Wrtitten by Marcus Stamström
Originally published at https://dev.to on November 29, 2020.
Relaterat / Kontaktpersoner