Sources Contact Advanced Search Tutorials

An Interest In:

Web News this Week

Search Archive

Some of Our Sources

View All Sources

Help Webnuz

Referal links:

April 26, 2021 06:17 pm GMT

Web components with vanilla JavaScript

What is a web component you ask?

Web components are reusable and encapsulated HTML elements, created using JavaScript. They let you create functionality inside a page that can be reused on another page, project or site. I thought I would create a quick tutorial creating a simple component while explaining the concepts.

Why use web components?

Web Components can be used in any framework, meaning if we build a component for one project we can carry it across to another project using a different framework with no extra coding required.
Shadow DOM, Shadow DOM allows components to have their own DOM tree that cant be accidentally accessed from the main document. Styles cannot penetrate a component from the outside, and styles inside a component wont bleed out.

Creating a simple tooltip component

To explain the basics of components we will create a tooltip component.

To start we will need to create a project to hold our component

.+-- index.html+-- components|   +-- tooltip.js

After we have a basic structure we can start with our index.html file. Lets add some boiler plate html, and import our tooltip.js script

<!DOCTYPE html><html lang="en">  <head>    <title>Web Components</title>    <!-- scripts -->    <script src="./components/tooltip.js"></script>  </head>  <body>    <h1>Tooltip example</h1>  </body></html>

Basic setup

Now we have the index.html setup, we can start creating our first web component
Inside of the tooltip.js file we will create a new class called tooltip. We will extend this class from HTMLElement which represents all HTML elements.

class Tooltip extends HTMLElement {}

We have a empty class, now to add the constructor.

constructor() {    super();    this.attachShadow({ mode: "open" });}

Because we are extending the HTMLElement we need to call super() to inherit the features of that class. this.attachShadow({mode: "open"}) attaches our element to the shadow DOM which keeps our components behaviour separate to the rest of the html.

Now we can add some html to our component

this.shadowRoot.innerHTML = `            <style>                #tooltip-container {                    font-size: 24px;                }                .tooltip{                    padding: 1rem;                    border-radius: 10px;                    background-color: black;                    color: white;                }            </style>            <slot></slot>            <span id="tooltip-container"></span>        `;

So we are accessing the shadowRoots innerHTML and setting it to what we want the component to be. This is mostly normal HTML apart from one element you may not have seen before, the <slot> tag. This is an element that we can use to add elements from the light DOM to inside of our component. In this case we will have the text that our tooltip will wrap around.

We can now define our component for our index.html to use.

customElements.define("example-tooltip", Tooltip);

^ Add this below the class definition. This is how we define our component to use it in our html. It takes two arguments, first the name of the element, this always has to be at least two words separated by a -. The second is our components class.

Let's try it out! In our html let's add our new element.

<example-tooltip>    Testing the tooltip</example-tooltip>

We should be able to see our text plus the pointing hand emoji, if we inspect the element we can also see the shadowDOM with our span inside.

Lets add some functionality

This is cool and all, but it doesn't do much... to add some functionality we can add in a method called connectedCallback() this method is called when our component is attached to the DOM.

connectedCallback() {    console.log("Ready to go ");  }

Try it out now, you can see in the console our component is ready to go. Still a bit useless though.

Let's add some event listeners to see when a mouse hovers over the tooltip.

this._tooltipContainer = this.shadowRoot.querySelector(      "#tooltip-container"    );// Add event listeners to our div elementthis._tooltipContainer.addEventListener(   "mouseover",   console.log('mouse over'););this._tooltipContainer.addEventListener(    "mouseleave",    console.log('mouse left'););

We can listen to the mouse events now, time to add some methods to show a tooltip.

The show method will append a new element into the shadow root with our tooltip text

_showTooltip() {    this._tooltip = document.createElement("span");    this._tooltip.innerText = 'Default text';    this._tooltip.className = "tooltip";    this.shadowRoot.append(this._tooltip);}

In this method we are creating a span and setting the text to default text and appending this element to our tooltip element.

Lets handle the mouse leaving the tooltip

_hideTooltip() {    this._tooltip.remove();}

Let's update the event listers to call our shiny new methods.
Inside of the connected callback update the event listeners.

this._tooltipContainer.addEventListener(      "mouseover",      this._showTooltip.bind(this));this._tooltipContainer.addEventListener(      "mouseleave",      this._hideTooltip.bind(this));

The .bind(this) is a quirk of Js, if we didn't have it our method wouldn't understand what this is in terms of our class.

We should now have a basic but working tooltip. Try it out!

Adding attributes

A tooltip isn't much use if we cant set the text inside of it. To do this we will use an attribute that we can pass in the tag of the element.
Inside of the connectedCallback() method add:

this._tooltipText = this.getAttribute("tip-text") || "Default Text";

We have the attribute data, now time to use it. Inside of the _showTooltip() update the inner text to:

this._tooltip.innerText = this._tooltipText;

We can now update our html to include the attribute inside of the <example-tooltip> element. Like so:

<example-tooltip tip-text="Some hint about this">

Try it out! We now have a working tooltip, with text we can pass into the component. We can use this component in any html file as long as our script has been imported.

Good practice

We have a working component. But what if our page dynamically adds and removes the element from the DOM. Our event listeners will remain, which could slow things down... There is a method that is called when our element is removed from the dom, the disconnectedCallback() it is similar to the connectedCallback(). To clean up our component we will add the following inside the class:

disconnectedCallback() {    this._tooltipContainer.removeEventListener("mouseover", this._showTooltip);    this._tooltipContainer.removeEventListener("mouseleave", this._hideTooltip);    console.log("All clean ");}

Try selecting the element and deleting it using the dev tools. You should see a console log when the component has been removed.

Thanks for reading!

Thanks for taking the time to read this article, it's been lengthy but hopefully now you understand what a web-component is, how to make one and how they can be beneficial. If you are stuck check out my Github repo for some help. If you are interested in doing more with this concept you should check out Stencil.js, a powerful complier that creates custom elements using typescript.

I am still new to components myself, so any comments are appreciated

Original Link: https://dev.to/leeoc/web-components-with-vanilla-javascript-egk

Share this article:

View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To