We added our shadow DOM and this changed things by a lot,
it is the right way to go but we're now missing our text
we had there initially and we'll now dive into a feature called templates to define our base HTML
structure of this HTML element, of our custom element and to later also bring back that text we
passed between the opening and closing tags of our custom element. Now for templates, we got two alternatives,
the first alternative for adding a template to our custom element is to go into our HTML document
and there, we can add a new element, the template element.
This is a HTML element built into the browser, understood by the browser and the important thing here
is that this element is not rendered automatically. Now
here we can take our question mark and add it in there like this, we had it in the span so let's wrap it
in a span here too,
select that,
now we have a template which in the end is just that span with the question mark inside of it.
So this is now our template and now we want to use that template as a blueprint for the HTML
content that makes up our custom element.
So previously, we simply created that HTML content in the connected callback and we happen to
have a very simple HTML template for our tooltip,
we only have this span with the question mark being added but it's easy to imagine more complex custom
elements like a video player which has a dozens of buttons and so on.
Now to use that content of the template in our web component
now, I'll first of all give this template an ID of tooltip template for example and now in the tooltip.js
file in the constructor where we can access the normal DOM,
just not the DOM of this tooltip
but we don't need that there, there
I will now get my template and I'll store it in a constant by using the document query selector, again accessing
the normal page DOM, not the DOM of this custom component
and there I will use the ID selector to select the tooltip template, so I'm using that ID which I
just added to my template. Now I get access to this template and now I want to basically copy the code
I set up in that template,
so this span in this case here and use it as a template for my custom component
and for that I will simply access my shadow root which is available because I attached the shadow
DOM and there, I will call append child.
I can do that here because I can already access the shadow DOM even before the element has been rendered
to the real DOM because the shadow DOM remember is kind of abstracted away from the real DOM anyways
so this is available in the constructor and now I will append a child here and the child is my template
and there, we can access a content property to access basically the content inside of the template and
on the content, we can call clone
node and there you have to pass a boolean indicating whether you want to do a deep clone or a shallow
clone, a deep clone means that you would clone any nested elements in there too,
so if you had like a h1 tag inside of that span, you would clone that too if you set the argument to
true,
if you set it to false, you would only clone the top level of elements.
Now I will perform a deep clone here by setting this to true and with that, if I now save that and we
reload that page, we see double quotation marks here actually,
the reason for that being that we still have our code in there to add another question mark,
so we should remove that and in addition, I will just change this a little bit down there,
here I will set my tooltip icon equal to this shadow root
and now here I want to find that span by simply adding a query selector because we can query the shadow
DOM just as we can query the normal DOM
and I will find that span there and with that if I save that and we reload this page, we have one question
mark only
but I can still hover over that.
So now we are using our template, our HTML template here.
Now this is one way of doing it but of course this has a couple of drawbacks, now
for example this web component now requires some content to be added to our HTML file where we in
the end just want to use that web component
and of course we're still losing that text here.
Now we can fix that text even with this approach but I will also show you an alternative
to this approach because it would be nice to have all the web component being composed in our Javascript
file here so that we don't have to add a template to the HTML code and I will show you both this solution
and a solution for our lost text here over the next lectures.