AltSchool Of Engineering Tinyuka’24 Month 2 Week 3

This week’s class commenced with our usual engaging discussions, reflecting on the key takeaways from the previous session. We explored the HTML video tag, delved into the HTML API, and dissected the Document Object Model (DOM). Additionally, we gained valuable insights into Media Elements, Details and Summary, and much more—topics I covered in my last article.

As we forge ahead on our journey into the cloud, we continued to solidify our foundational knowledge while diving deeper into HTML. Join me as we navigate through these concepts and enhance our web development skills together!

What Are Web Components?

Web components represent a suite of web standards designed for developers to create reusable and self-contained UI elements that can be easily integrated into both new and existing applications, functioning much like standard HTML elements. The Web Component standard is composed of three primary components:

1. HTML Templates: The <template> element enables developers to define fragments of HTML that can be reused throughout an application. The content within a <template> is not rendered automatically; instead, it can be cloned and inserted into the DOM using JavaScript when needed. For example:

<template id="myTemplate">
  <div class="card">This is a reusable card.</div>
</template>

In the above code sample, the template containing a card can be cloned and rendered multiple times in the application.

2. Custom Elements: Custom Elements provide the ability to define new HTML tags with unique functionality. This is achieved by extending the HTMLElement class through JavaScript. For instance, you might create a custom button element like so:

class MyButton extends HTMLElement {
  connectedCallback() {
    this.innerHTML = '<button>Click Me!</button>';
  }
}
customElements.define('my-button', MyButton);

After defining this custom element, you can simply use <my-button></my-button> in your HTML.

3. Shadow DOM: The Shadow DOM offers a way to encapsulate the DOM tree of a custom element, allowing developers to create isolated styles and structures. This prevents conflicts with other styles in the application, ensuring that CSS defined within a shadow DOM only applies to that particular component. Here’s how you might use it:

class MyCard extends HTMLElement {
  constructor() {
    super();
    const shadow = this.attachShadow({ mode: 'open' });
    shadow.innerHTML = '<style> .card { color: red; } </style> <div class="card">Shadow DOM Card</div>';
  }
}
customElements.define('my-card', MyCard);

In this example, the styles defined within the shadow DOM will not interfere with the global styles, maintaining neat separation.

The Template Element

The <template> element is an essential feature in web development, enabling developers to define HTML fragments that remain hidden and unrendered by default. These fragments can be cloned and inserted dynamically into the Document Object Model (DOM) through JavaScript, making them particularly valuable for creating reusable user interface components.

For instance, when building a list of user comments, a developer can use a template to structure each comment, allowing the same template to be reused for multiple entries:

<template id="commentTemplate">
  <div class="comment">
    <h4>User Name</h4>
    <p>This is a comment text.</p>
  </div>
</template>

In this example, the <template> defines a comment structure but remains inactive until triggered by JavaScript. When you want to insert a new comment, you can easily clone the template and populate it with specific data:

const template = document.getElementById('commentTemplate');
const commentSection = document.getElementById('comments');

// Example function to add a new comment
function addComment(userName, commentText) {
  const clone = document.importNode(template.content, true);
  clone.querySelector('h4').textContent = userName;
  clone.querySelector('p').textContent = commentText;
  commentSection.appendChild(clone);
}

In this function, addComment creates a new instance of the comment template, filling it with dynamic content before appending it to the comments section of the webpage.

Shadow DOM and Styling (Encapsulation in Web Components)

The Shadow DOM is a powerful feature of web components that allows developers to encapsulate CSS styles within a specific component, effectively isolating them from the rest of the document's styles. This encapsulation ensures that styles defined within a shadow DOM do not affect the global styles of an application, and vice versa, enabling greater modularity and style integrity.

Applying Styles to the Shadow DOM

When you create a shadow DOM for a web component, you can style elements within it without worrying about conflicts with external CSS. Here's a simple example of how to apply styles directly to a shadow DOM:

class MyComponent extends HTMLElement {
  constructor() {
    super();
    const shadow = this.attachShadow({ mode: 'open' });
    shadow.innerHTML = `
      <style>
        .box {
          background-color: lightblue;
          padding: 20px;
          border: 1px solid blue;
        }
      </style>
      <div class="box">This is a styled shadow DOM element.</div>
    `;
  }
}

In this example, the styles defined within the <style> tag inside the shadow DOM will apply only to the div with the class box, creating a visually distinct element.

Understanding the ::slotted() Pseudo-Class

Additionally, the Shadow DOM introduces the ::slotted() pseudo-class, which allows you to style elements that are slotted from the light DOM into the shadow DOM. This feature is useful for applying styles to content passed into your component. For example:

<template id="cardTemplate">
  <style>
    .card {
      border: 1px solid #ccc;
      padding: 16px;
    }
    ::slotted(h1) {
      color: blue;
    }
  </style>
  <div class="card">
    <slot></slot>
  </div>
</template>

In this case, when an h1 element is slotted into the card component, it will be styled with blue text, thanks to the ::slotted(h1) rule.

A Guide to Browser Handling and Customization

When browsers come across undefined or unrecognized HTML elements, they do not throw errors; rather, they treat these elements as generic inline elements, much like a <span>. This means that even if the <star-rating> element is not recognized by the browser initially, its content will still be rendered appropriately as if it were wrapped in a <span> tag.

For example, if you include a custom element like this in your HTML:

<star-rating>Rate your experience:</star-rating>

The browser will display "Rate your experience:" but without any specific functionality or styling associated with the <star-rating> element until it is properly defined.

To convert this unrecognized element into a fully functional custom element, you would use JavaScript along with the customElements.define() method. This method allows you to register your custom element by extending the HTMLElement class. Here’s how you might define the <star-rating> element:

class StarRating extends HTMLElement {
  constructor() {
    super(); // Calls the constructor of the parent class
    // Initialization code here, such as shadow DOM and style setup.
  }
}

// Defining the custom element
customElements.define('star-rating', StarRating);

With this code, the <star-rating> element becomes a recognized custom element, allowing you to implement specific functionality, styles, and behaviour suited to your application.

Browsers handle undefined elements as generic inline elements without errors, which enables developers to experiment with custom tags. To create truly unique and functional web components, JavaScript is used in conjunction with the customElements.define() method to register and establish custom elements, transforming simple placeholder tags into robust and interactive features within web applications.

File and Directory Management

The terminal is a powerful tool for managing files and directories efficiently. Here’s a brief overview of essential commands for file management, file viewing, and additional terminal operations:

File and Directory Management Continuum

• ls: Lists the files and directories in the current working directory, allowing you to see what’s present.

• cd: Changes the current directory to another directory, facilitating navigation through the filesystem.

• mkdir: Creates a new directory, useful for organizing files.

• touch: Generates an empty file, often used to create placeholder files.

• cp: Copies files or directories, enabling duplication without altering the original.

• mv: Moves or renames files and directories, helping maintain an orderly structure.

• rm: Removes files or directories (use with caution, as this action is usually irreversible).

For example, to create a new directory called "projects" and navigate into it, you would execute:

mkdir projects

cd projects

Viewing and Editing Files

• cat and less: These commands let you view the contents of files directly in the terminal. less is particularly useful for larger files as it lets you scroll through the content.

• nano, vi, vim: These are terminal-based text editors that allow you to create and edit text files. For beginners, nano is user-friendly, while vi and vim offer more advanced features.

For instance, to view a file named "notes.txt" with cat, you’d run:

cat notes.txt

Additional Terminal Commands

• echo: Prints text to the terminal, often used for scripting or displaying messages.

• man: Displays the manual page for a specified command, providing users with detailed command usage and options.

• clear: Clears the terminal screen, helping to maintain a tidy workspace.

• chmod: Changes file permissions, crucial for security and access control.

• chown: Modifies file ownership, allowing users to define who has control over specific files.

Thank you so much for sticking around. I’d love to hear your thoughts and feedback, so please don’t hesitate to share your insights in the comments section below.

I am Ikoh Sylva a Cloud Computing Enthusiast with few months hands on experience on AWS. I’m currently documenting my Cloud journey here from a beginner’s perspective. If this sounds good to you kindly like and follow, also consider recommending this article to others who you think might also be starting out their cloud journeys to enable us learn and grow together.

You can also consider following me on social media below;

LinkedIn Facebook X