EIJI KITAMURA: Web Components enable
you to build great websites through the use
of reusable components.
But what does it take to build a web component?
My name is Eiji, and today I'm going
to give you an overview of Custom Elements.
Custom Elements are a key feature
in Web Components that lets you create your own HTML tags.
Given the original purpose of HTML tags as a script language
for documents, it has a limited vocabulary
for elements, which means we end up
relying on divs and existing markup to structure pages.
Custom Elements will change that.
Some frameworks, such as AngularJS,
provides a way to define your own tags.
But, they are specific to the framework, and not reusable.
With Custom Elements, you can define and register
new Dom elements, as well as inherit and extend
existing DOM elements.
These differences make Custom Elements easier to handle,
not only for element authors, but also
for developers who use them.
At the time of this recording, Custom Elements
have landed in Chrome and Opera.
Firefox supports it innately behind a flag.
But support for Web Components is changing weekly,
so be sure to check chromestatus.com
for an up to date browser support table.
To detect the availability of the custom element,
check if document register element is available.
For supported browsers, you can use platform.js,
a collection of web components polyfill
made available as a part of the Polymer library.
This will automatically detect the availability of the Custom
Elements and polyfill it, if necessary.
Registering a Custom Element is simple.
Just call document register element,
with a new tag name as an argument.
This will register a new tag name, in this case x component,
which you can then start using in your document.
The tag name must be separated with a dash.
Anything other than that will return errors.
You can use those custom elements,
not only declaratively as an HTML tag,
but also imperatively, using JavaScript.
One way is to use the constructor written
by document register element.
You can instantiate the constructor
to obtain a DOM object.
Because Custom Elements are just like any other HTML element,
you may also use document create element
to create a new instance.
Once you learn how to define and register a custom tag,
you should also want to add some features to it.
You can do so by inheriting an existing element's prototype.
First, create a new object from HTML element prototype
by using object create.
This new object will be the prototype for your element.
Then add your own properties and message to it.
When registering the Custom Element,
[INAUDIBLE] object has a second argument, which has a prototype
object with a value of key prototype.
Now, you can use the x component Custom Element in your HTML.
If you inspect the x component element on Dev Tools,
it will look something like this.
X component element is an instance
of x component prototype, which has
a property and the method you have just defined,
alert and name.
And this element is inherited from HTML element,
so it has all the features HTML element provides.
You can also extend an existing element,
which is called type extension custom element.
To extend an element, give the second argument in register
element, an object with extends and prototype as keys.
For extends, give it a tag name string you want to extend from.
For example, input.
For prototype, give it the best element's prototype.
If you are extending from input element,
use HTML input element.
For using type extension custom element,
add the custom element's name as a value of
is attribute to the extended element.
To imperatively recreate a DOM object of the element,
and the tag name as the second argument to create element.
You may wonder what our use cases for type extension custom
element?
Actually, there's already a really good example
in the world.
If you go to GitHub, you can find
lots of sections that indicates relative time.
If you take a look into one of them using Dev Tools,
you will notice it is actually a time
tag with an extension of relative time.
Notice that the datetime attribute
indicates an absolute time.
This is achieved by using type extension custom element.
The relative time type extension automatically
calculates relative time, and appends it
to the time element as a text content.
To learn more about the time element, please
visit its GitHub repository.
I mentioned that the relative time type extension appends
a string to the element as a text content.
But when does that happen?
Custom elements support life cycle callbacks
that enable you to manipulate DOM on certain timings.
There are four types life cycle callbacks.
Created callback, this is called after the element is created.
Attached callback, this is called
when the element is attached to the document.
Detached callback, this is called
when the element is detached from the document.
Attribute changed callback, this is
called when one of the element's attributes is changed.
Relative time type extension hooks
in to created callback and attribute
changed callback, and manipulates the element's text
content.
In order to use those lifecycle callbacks,
you can simply add them to the prototype object
when registering a custom element.
Once inside of created callback, you
can leverage the power of template and Shadow DOM
to add additional content to our element.
Let me show you an example.
So this is a template, we are adding Custom Elements content
followed by an actual HTML that displays the custom element.
Since this is exactly the same code we used in the Shadow DOM
video, I'm not going to explain how
to use template and Shadow DOM.
If you haven't watched them, please do so.
For JavaScript, we can use a similar skeleton
as we used in the earlier example.
In order to create shadow root, first,
add created callback as a property of custom elements
prototype.
Then, call create shadow root on this object.
To stamp out template, pick the template DOM element,
using querySelector Then, clone it using document import node,
and append it to the shadow root.
And finally, register the custom element.
The result will look something like this.
So this is the custom element.
To learn more about custom elements,
be sure to read the HTML5 Rocks article, written
by Eric Bidelman.
Thank you for watching.
See you in the next episode.