So now that we had a detailed look at how we can create autonomous web components by extending HTML element,
let me also show you that alternative way which I mentioned where you can create web components by basing
them on specific built-in components or HTML elements I should say
and for that, I will create a new component, I'll create it in a new Javascript file which I'll name
confirm-link.js. Now in there,
I will create a new class and I'll name this ConfirmLink as well
and here I want to extend the HTML anchor tag element.
Now the HTML anchor tag element belongs to the a HTML element,
so to this a href here.
Now here we could be forwarding the user to google.com, Google
and obviously if we we reload this and we click this link, we are forwarded to that page.
Now the idea is that we wrap this in our own web component or that we create a web component based on
that anchor tag which still has all the functionalities of the built-in anchor tag, so which still takes
the ref attribute and forwards us but which in addition asks us if we really want to go there before
redirecting us
and this is a use case you could certainly have on a web page where you want to have links leading to
external resources, where you want to ask the user before really forwarding the user.
Now for that here in ConfirmLink, I'll add the connected callback right away, don't need to constructor
really right now,
just want to have the callback and there I want to register a click listener on this element,
so on the anchor tag which I am in the end extending here. We could set up a shadow DOM here and that is
really important.
I'm not doing it here because I don't need it but when extending a specific element, you can use all
the same features we used here in the tooltip, so you can attach a shadow root,
you can add your own template,
you can do all these things here too. Here,
I just happen to not need anything of that, I want to keep all the default look and behavior and all
of that,
I just want to add an extra click listener and I do that here in the connected callback by adding an
event listener and by adding it directly to the this keyword, I add it to my custom element which extends
this built-in element and I add my click listener here
and when this click happens, then I will execute a function
and here I will use an ES6 arrow function which takes an argument,
the default event object which will be created by the Javascript engine, by the browser so to say
and then here I have that function body which gets executed.
Now we could also assign some method of this class which we create here
but here I want to keep it really simple,
I just have this function which gets executed upon a click
and what I want to do here is, I want to check if confirm, confirm is a method or a function built into
Javascript, it's a globally available function where I ask, do you really want to leave?
And if this is yes, then confirm or if the user clicks yes, then this will return true. If this is not
the case and hence I add exclamation mark,
so if the user clicks cancel or doesn't confirm this, then I want to stop the default behavior,
I don't want to forward the user and therefore on the incoming event object, I can call prevent default
to suppress the default behavior which would be to basically redirect the user to the target of
the link which would be the default behavior of an anchor tag. Now with that created, we just need to
define it,
so again we'll use custom elements and there the define method and just as before, we now choose our own
selector, our own tag for that element
and just as for the tooltip, we still should use a name which has a dash in it and which also has some
unique prefix.
So here, I'll again use uc and then confirmlink
for example. The second argument then is our ConfirmLink class here which extends the HTML anchor
element,
so just as before but now since we don't extend HTML element but this specific HTML element, the
anchor element and that would be the case no matter if we extend the anchor or a paragraph or an image
or whatever this, whenever we extend a specific element and not the generic HTML element,
so whenever we have such a specific element, we need to pass a third argument here which is an object,
where I set extends to the tag of the element we extend, in this case it's an anchor element,
so we have to use the a tag here.
So our custom element extends the built-in anchor tag, the a element and now with that, we can go to the
index.html file and in there, I first of all want to import this,
so I will copy that import and add an import to confirm-link.js and now at the bottom here, instead
of my anchor tag like this, I want to use my custom element.
Now when extending a built-in element, you don't use your custom element as you did before by placing
your own tag here,
instead you keep the original tag, so the anchor tag, the a tag but you add a new attribute, the is attribute
and the value of that attribute now is your custom selector here.
So that is how you use web component or a custom element based on a built-in element, like the anchor
in this case.
So now I say is, the uc-confirm-link on the anchor tag
and with that if I now save this and I reload that, when I click this link, I get asked if I really want
to leave. If I click cancel, then I stay here because if I click cancel, we basically execute this code
and we prevent the default,
hence the navigation is cancelled. If I click okay instead,
then we proceed as before and that is pretty cool.
This is a cool example for how you could extend a built-in element, keep all its style and all its functionality,
though as I mentioned you could replace for example the look by adding your own shadow DOM and your
own template
but here I'm just adding a little bit of functionality to all of a sudden have a brand new element based
on that original built-in element.