Skip to content

Latest commit

 

History

History
191 lines (133 loc) · 5.94 KB

lesson-17.md

File metadata and controls

191 lines (133 loc) · 5.94 KB

FEW 2.2 - Web Component Lab

Continue working on your CSS Framework. This class will be dedicated to completing the challenges from class 9 and use any left over time to improving your CSS framework.

Learning Objectives

  1. Build simple web components
  2. Define custom tags that encapsulate functionality
  3. Use attributes to configure components
  4. Reflect properties and attributes
  5. Use Web Component Lifecycle methods

Continue the Web Component example challenges:

https://github.com/Make-School-Labs/simple-component

When you complete the challenges above your job is to create a component that will be included in your framework. You can use one of the challenge examples as a starting point.

If you completed the challenges and you want to try something more challenging for your framework here are few ideas:

Apply best practice

When making your components they must use a hyphen. Best practice would have you use a prefix any tag names with the name of your framework. For example, if your framework was named Corgi custom tag names might:

  • `
  • <corgi-navbar></corgi-navbar>
  • <corgi-carousel><corgi-carousel>

If the name of your framework is long use the initials. For example, imagine the name of your framework was "Stylin Styles" You might abbreviate to:

  • <ss-tabs></ss-tabs>
  • <ss-navbar></ss-navbar>
  • <ss-carousel><ss-carousel>

Web Components vs Custom Element

Any time you create a new custom element with customElements.define() define you are creating a new custom element. Your custom element may or may not use the Shadow root.

Let's call Custom Elements that use the shadow root "Web Components" and custom elements that don't use the shadow root "Custom elements".

What's the difference?

Using the Shadow root:

  • Pros
  • Encapsulation - elements and styles are totally separated from the DOM
  • Can't be accidentally affected from outside
  • Cons
  • Can't share styles from outside
  • It's a little more complex to program

Without the Shadow Root:

  • Pros
  • Easier to program
  • Can share styles from outside
  • Cons
  • May not be as predictable
  • Can be accidentally affected by the outside

It's up to you whether you use the shadowroot or not for this assignment.

Your web components/Custom elements don't have to be huge and complex. If you can make a useful element that has a practical application that's a goal. If you can make something fun and interesting that's okay also!

Using Templates

The template tag allows you to define a block of HTML code that is not displayed by the browser. Instead, the template content is held in reserve for use by your code.

Why use a template? Any time you need to display a dynamic block of HTML. For example.

  • Dynamic elements that are generated by code like popup dialog boxes.
  • Code that is generated from JSON, like lists of users, or products, or other content.
  • With web components and custom elements you can use a template to generate the content.

What can you put in a template? Anything that you can put in HTML!

This includes the style tag. Sounds like it would also include the script tag but I haven't tried this so I'm not sure how useful it would be.

Here's a quick code sample:

Define a template like this. You can put this anywhere in your HTML.

<template id="cat-template">
  <figure>
    <figcaption>
      <h1>Cat!</h1>
    </figcaption>
  <img src="images/cat-picture.png">
  </figure>
</template>

Use the template with JS:

// Get a reference to your template
const template = document.querySelector('#cat-template')
// copy the contents of the template
const catContent = template.content.cloneNode(true)
// Put the content somewhere in the document
document.querySelector('.cats').appendChild(catContent)

The code above finds the template and copies the content of that node, then appends it top the DOM.

You can also apply the same idea to a web component. In this case, you'll want the template to part of the JS code that defines your web component.

// Create a template
const template = document.createElement('template')
// Set the content of the template
template.innerHTML = `
<style>
  /* Types for your component here */
  .content {
    display flex;
    ...
  }
  ...
</style>
<!-- HTML content here -->
<figure>
  <figcaption class="content">
    <h1>Cat!</h1>
  </figcaption>
  <img src="images/cat-picture.png">
</figure>
`

Here you created a new template element in code. Then set the innerHTML of that element.

In your component class you can use the following code to make use of the template above:

class CatTemplate extends HTMLElement {
  constructor() {
    super();
    // Clone the template in the code template variable above
    const tempNode = template.content.cloneNode(true)
    ...
  }

  ...
}

JS Modules

One area where the code above creates a problem is the scope of it a variable. The variable template would normally be in the global scope and the name is a common name it's possible it could clash!

Modules to the rescue! When defining a script adding the attribute type="module" turns that script into a module.

What's a module? A module defines all identifiers in document scope. That is variables and functions will scope to the module:

<script src="cat.js" type="module"></script>

All variables are scoped to cat.js.

To share values across modules use the import and export directives.

// cat.js
const purrs = 999

export { purrs }

In another "module" import the value exported like this:

// script.js
import { purrs } from './cat.js'

console.log(purrs) // 999

After Class

Finish up your CSS Framework. Be sure to get some feedback on your work from your peers!