Web components in video

Hi! Today, I am going to talk about Web components, that are reusable widgets. 

You need an animated gif player with lots of options? Don't worry, just add this line of code in your HTML file! It’s a custom HTML element (that is valid) and you will have an animated gif renderer in your Web page. 

And you will have also tons of options for setting the speed, making it loop and so on. 

So, how can you use this custom element?

This is brand new: you will import an HTML file in your HTML document! The same way you import a CSS style sheet. 

So, the principle of Web components is this one: import an HTML file that will come with HTML, CSS and JavaScript code encapsulated, and then you can reuse it. 

Let's see an example: we will add an animated gif player in our Web page. 

If you go to webcomponents.org, you’ve got links to some repositories. 

I use customElements.io, look for « animated gif » and find this  x-gif Web component. 

So here is the demo page… you can also click directly on the page that presents the element in the gallery.

Here, it says: ‘OK you want to use it? download the ZIP’. 

I download a ZIP file, uncompress it, and then I’ve got the x-gif distribution. 

If you read the README, it says that the components you need to use are located in the « dist » directory.

I prepared a nearly empty Web page: I just included a polyfill for Web components and prepared some headings for the Web components I am going to use.

We can try this page… here is how it renders. 

I downloaded the ZIP file for the animated gif, and if you read the README, it says that the component you need to use is located in the dist directory. 

Let's copy this in the same directory as my HTML page and I rename it x-gif. 

Now, in my example.html file, I will import the Web component. 

And for that, I just read the documentation that says that to use x-gif, you need to import the x-gif.html file. 

So let's add it to our Web page. 

And you remember that I put it in the x-gif directory.. and I will copy just an example (of x-gif use). 

So let's copy this one that has a ping pong effect with the animation, it plays it back and forth.

I save, and I reload my page, and now I’ve got an animated gif.

If I want to use an another component for speech synthesis, I do the same thing.

I go to the webcomponent.org Web site, go to customElements.io repository and I look for custom Web components that can do speech synthesis.

Let's try with this one: ‘voice-elements’. 

So the same thing: I download the ZIP, I look inside the ZIP… ‘voice elements’. 

If I read the documentation, I will see that the elements I need to import (the HTML files I need to import) are located in the src directory.

I copy it to my directory, and I rename it ‘voice’. 

Then I can read the documentation.

I need to import voice-player and if I wanted to use voice recognition I would import this one… So, I add the import for this voice-player, and then I can look at the demonstration and at the documentation.

I prepared something already… This is just a voice-player element that will say an ‘Hi!’ sentence to you my students and I added a button. 

When I click on the button it will call the speak method from this Web component.

Ok let's try it. 

Reload. 

Now, I’ve got the button and listen! [Hi, students from the HTML5 Part 2 course. A Web component is speaking]

That's all, you saw how you can reuse existing components.

Easy! Bye bye!