This chapter will go through the fundamentals on the top of which our lightning web component is developed. So before actually starting lightning web component lets learn some basic fundamentals so that are our concept are more clear.
Web Component
As we discussed in earlier chapter that in the web stack 2014 all the features needed to build an app was not provided by web standard and therefore thick framework layer was used which provided to build an app. Angular, react,aura came into picture providing the standards not there in web stack. reducing the overall performance of the app
Gradually web stack evolved and all the key elements were provided in web standards itself.
Web Component are skeleton underneath the structure
Web Components help in developing application in more modular way through custom elements or components. These custom elements allow us to break the application into small chunks into reusable functionality
Lets take example of Amazon,
Each of these components can be web components having same structure like title, image, price tag. So instead of creating thousands of different cards having same structure but different content,
With web component we can create just 1 tag having placeholder element for title, cover image and price tag. With help of which we can create thousand of cards.
4 Pillars of Web Component
A.Custom Elements
We have the video element for displaying video, the select element for displaying a select box, the img element for displaying images
But the Web today has to do a lot more work than it did previously, and HTML can’t always keep up with the rate of change. So Custom Elements are about giving us, the developers, flexibility to create elements based on their function and giving us low-level access to define their properties.
These element provide a way to build our own fully-featured DOM elements. These are developer defined HTML Elements which work in the browser with other HTML elements like <p>, <main> or <body>. By designing our own new elements we can bring new powers to HTML to accomplish tasks previously only managed with JavaScript.
Custom elements are just like those standard HTML elements — names in angle brackets — except they always have a dash in them
<special-button></special-button>
There are two types of custom elements you can create:
- Autonomous custom element: Standalone elements; they don’t inherit from built-in HTML elements.
- Customized built-in element: These elements inherit from — and extend — built-in HTML elements.
Defining a new element
Sign up to codepen.io
In JavaScript section put Below code:
class MyComponent extends HTMLElement {
connectedCallback() {
this.innerHTML = `<h1>Hello world</h1>`;
}
}
customElements.define('my-component', MyComponent);
In HTML section put below code:
<my-component></my-component>
We created a standalone element i.e. element from scratch without any dependency on JavaScript, CSS
Understand Code Line by Line
class MyComponent extends HTMLElement
All custom elements must in some way extend an HTMLElement in order to be registered with the browser.Extending HTMLElement ensures the custom element inherits the entire DOM API and means any properties/methods that you add to the class become part of the element’s DOM interface.
connectedCallback() {
}
Browser calls this method when the element is added to the document (can be called many times if an element is repeatedly added/removed)
this.innerHTML = `<h1>Hello world</h1>`;
The innerHTML property sets or returns the HTML content (inner HTML) of an element.
customElements.define('my-component', MyComponent);
The CustomElementRegistry interface provides methods for registering custom elements and querying registered elements
The define() method of the CustomElementRegistry interface defines a new custom element.
Name -Name for the new custom element is my-component
constructor- Constructor for the new custom element is MyComponent
B.HTML templates
Earlier we used same markup structures repeatedly on a web page, but now we can use some kind of a template rather than repeating the same structure over and over again. This was possible before, but it is made a lot easier by the HTML <template>element (which is well-supported in modern browsers)
This element and its contents are not rendered in the DOM, but it can still be referenced using JavaScript.
Example:
<template id="my-paragraph"> <p>My paragraph</p> </template>
This will not appear in your page until you grab a reference to it with JavaScript and then append it to the DOM, using something like the following:
let template = document.getElementById('my-paragraph');
let templateContent = template.content;
document.body.appendChild(templateContent);
Document Object Model
DOM is a representation of an HTML document. It is used by browsers to determine what to render on the page, and by Javascript programs to modify the content, structure, or styling of the page.
When HTML gets converted to the DOM, every element is considered to be a node. When you have a group of these nodes nested inside one another, it is known as a node tree.
Because the DOM tree lacks encapsulation, the entire structure of the name tag is exposed to the document.
If you notice in below image -the custom element we created and text inside h3 are of Same color
C.Shadow DOM:
Shadow DOM allows us to create our own node trees, known as shadow trees. These shadow trees encapsulate their contents and render only what they choose. This means we can inject text, rearrange content, add styles
The Shadow DOM API is a key part of this, providing a way to attach a hidden separated DOM to an element.
Shadow DOM allows hidden DOM trees to be attached to elements in the regular DOM tree — this shadow DOM tree starts with a shadow root, underneath which can be attached to any elements you want, in the same way as the normal DOM.
Enough of theory, let’s understand with help of Example
When we have style in main document and we don’t want it to be part of other components i.e. we don’t want a component to have global style so we can put important property in CSS.
We can put the component property inside shadow DOM and then it will have its own styling
Shadow DOM Terminology
There are some bits of shadow DOM terminology to be aware of:
- Shadow host: The regular DOM node that the shadow DOM is attached to.
- Shadow tree: The DOM tree inside the shadow DOM.
- Shadow boundary: the place where the shadow DOM ends, and the regular DOM begins.
- Shadow root: The root node of the shadow tree.
Code Snippet
Both text inside h3 tag the custom element we created are h3, now we want there color to differ, so we can put the custom Element code inside the Shadow Dom
When you do inspect element you will see the code inside the shadow root.
D.HTML Imports:
- Imports allow you to include HTML documents within other HTML documents.
- HTML imports use the <link>element to reference the file that you wish to import; this works in a similar way to how you include stylesheets.
<head> <link rel="import" href="/path/to/template.html"> </head>
3. In the example below, the imported HTML file contains several <link>and <script> elements that are responsible for setting the base styling and functionality for an application.
<link rel="stylesheet" href="css/normalize.css"> <link rel="stylesheet" href="css/grid.css"> <link rel="stylesheet" href="css/alerts.css"> <link rel="stylesheet" href="css/buttons.css"> <script src="js/jquery.js"></script> <script src="js/app.js"></script>
Reference
How to create a custom component
Web Component from Zero to Hero
