Web Component Intro
# MAD9022 Hybrid
The Hybrid portion of this course is designed to teach you how to create your own custom Web Components.
Through the hybrid modules you will learn about JavaScript class syntax, and how to create and extend your own JavaScript objects. Creating an extended class of your own will be the first hybrid exercise.
Then you will learn about how to create and style your own custom web component. This will be your second hybrid exercise.
Finally, you will learn about Web Component libraries that can help you build collections of web components just like framework authors do. Using Lit (opens new window) to create web components will be your third hybrid exercise.
# Web Component Intro
The list of available HTML elements is a finite list. The elements that are included in the list are largely meant to convey a single concept. Eg: <p> means that the content nested inside this tag
is all part of a paragraph. This is what is meant by semantic HTML. Each tag has a specific meaning.
The associated functionality of any element is defined through the DOM. The events, which an element will listen for, the properties and attributes of the element, and the visual behaviour of the
component are all predefined. When you add a <select> element to your webpage, you don't have to explain to the browser how it works, how it can contain <option> elements, or how a user can
interact with it. It has built-in functionality that you can access through JavaScript.
Web Components can be thought of as an extension of HTML5. Developers can create their own HTML element, define what attributes it can have, define event listeners, and even control what other
elements are allowed as children. Once defined and imported, other developers can use these pre-built and enhanced elements, simply by adding the assigned tag into their own HTML files.
<head>
<script type="module" src="./js/coolcomponent.js"></script>
</head>
<body>
<header>
<h1>Existing HTML Content</h1>
</header>
<main>
<cool-component type="awesome">Steve</cool-component>
</main>
</body>
2
3
4
5
6
7
8
9
10
11
In the example above you can see, on line 9, a web component that was imported on line 2.
Key Point
All web components have hyphenated names.
Web Component YouTube Tutorial Playlist (opens new window)
# Supporting Technologies for Web Components
To be able to build a web component you need to learn how these technologies work.
- JavaScript Class Syntax
- The Prototype Chain in JavaScript
- JavaScript Modules
- CSS Specificity and ShadowDOM
# DefineElement Method
When you create a web component you are creating a JavaScript class that defines the HTML, its styling, and its behaviour. Once the class is defined it needs to be connected to the DOM.
The window object has a customElements.defineElement() method which will connect our class with the browser's current version of the DOM.
window.customElements.define('cool-component', CoolComponent);
After you run this line of code in your script, other developers will be able to add <cool-component> into their HTML.
Key point
We only need to run this command. There is nothing that needs to be exported from our file. The command tells the DOM to add your new component to the list of actual elements to be used in the
webpage. Your script tag that loads your web component script will need to include the type="module" attribute.
window.customElements.define() reference (opens new window)
The <cool-component> element can be statically added directly to your HTML. Once the customElements.define method is called, then the browser will know how to add it to the screen.
Alternatively, you would be able to add a <cool-component type="awesome">Hello</cool-component> to your page through JavaScript, the same way you add any other element.
function addCoolThing() {
let cc = document.createElement('cool-component');
cc.setAttribute('type', 'awesome');
cc.innerText = 'Hello';
document.body.append(cc);
}
2
3
4
5
6