Render Hello World Text with Custom Elements

Yonatan Kra
InstructorYonatan Kra
Share this video with your friends

Social Share Links

Send Tweet
Published 5 years ago
Updated 2 years ago

Custom elements are fun technology. In this video, you will learn how to set one up and running in less than 2 minutes.

You'll learn how to create a Custom Web Element (that extends HTMLElement) that renders text to the browser and respond to a click event listener.

Instructor: [00:01] In order to create a custom element, we need to create a class. Inside our HDML file, we'll create a script tag. Inside we'll define a class. We'll call it, "My custom element." We'll make sure it extends HTML element. Inside its constructor, we'll call the super method, which makes sure we inherit everything from HTML element.

[00:22] We'll define the click event and set up a call-back that fires an alert. Now we can define a connected call-back, which fires when the custom element is connected to the dome. Here, it is safe to do dome manipulations like inner HTML. This is a good place to set up our custom elements template.

[00:43] The second thing we need to do is to define the custom elements, so window.customelements.define. We pass the custom tag name and the class we've just created. The final thing we need to do is to actually use the tag inside our dome. We set it up, refresh the page, and here is our custom element. We click it and we see that our click is registered.

[01:05] This is how we create a custom element.

egghead
egghead
~ 20 minutes ago

Member comments are a way for members to communicate, interact, and ask questions about a lesson.

The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io

Be on-Topic

Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.

Avoid meta-discussion

  • This was great!
  • This was horrible!
  • I didn't like this because it didn't match my skill level.
  • +1 It will likely be deleted as spam.

Code Problems?

Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context

Details and Context

Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!

Markdown supported.
Become a member to join the discussionEnroll Today