What is a component?

First things first: Web components are a set of standards that allow us to write modular, reusable and encapsulated HTML elements. And the best thing about them: since they're based on web standards, we don't have to install any framework or library to start using them. You can start writing web components using vanilla javascript, right now! [source: Pascal Schilp @ www.dev.to]

Reference

• MDN

• Dev.to

• codementor.io

HTML Component

<!-- Before CSS component creation --> 
<div>
    <button class="button">Button 1</button>
    <button class="button">Button 2</button>
    <button class="button">Button 3</button>
    <button class="button">Button 4</button>
  <div>

CSS Component

/* component customization */

.custom-buttons {
	/* component container styles */
}

.custom-btn {
	/* style here */
}

Javascript Component

const buttons = document.querySelectorAll('.button');
class Button {
  constructor(element){
    this.element = element;
    this.element.addEventListener('click', () => { this.buttonClick() });
  }
  buttonClick(event){
    console.log('button clicked!');
  } 
}

Putting it all together

data-attributes

Examples from Dan Levy lecture on May 16, 2019

// HTML Component
<div class="container home">
  <header>
    <h1 class="main-header">Components - II</h1>
    <nav class="main-nav">
      <a href="<https://learn.lambdaschool.com/>" target="_blank" id="home-tag">Home</a>
      <a href="#" class="nav-item">About</a>
      <a href="#" class="nav-item">Blog</a>
      <a href="#" class="nav-item">Contact</a>
    </nav>
  </header>
  <section class="main-content">
    <h2>Custom Data Attributes Rock</h2>
    <p>Meh swag you probably haven't heard of them celiac, mustache wolf cray ramps ugh bicycle rights beard lo-fi green juice pinterest next level. Vegan art party chia man braid. Umami blue bottle actually disrupt green juice shoreditch biodiesel edison bulb drinking lo-fi synth 90's.</p>
    <div class="tab-navigator">
      <div class="tab-links">
        <div class="link" data-tab='1'>Tab 1</div>
        <div class="link" data-tab='2'>Tab 2</div>
        <div class="link" data-tab='3'>Tab 3</div>
        <div class="link" data-tab='4'>Tab 4</div>
      </div>
      <div class="tab-content" data-default-tab='2'>
        <div class="content" data-tab='1'>
          <h3>Tab 1 Content</h3>
          <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Neque autem fuga voluptates optio.
            Aperiam.</p>
        </div>
        <div class="content" data-tab='2'>
           <h3>Tab 2 Content</h3>
          <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Neque autem fuga voluptates optio voluptate excepturi nemo, quaerat eaque.
            Aperiam.</p>
        </div>
        <div class="content" data-tab='3'>
           <h3>Tab 3 Content</h3>
          <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Neque autem fuga voluptates optio voluptate excepturi nemo, quaerat eaque, repudiandae consequuntur accusamus consectetur eum perspiciatis magnam ratione laboriosam recusandae veniam.
            Aperiam.</p>
        </div>
        <div class="content" data-tab='4'>
           <h3>Tab 4 Content</h3>
          <p>Lorem, ipsum dolor sit amet.
            Aperiam.</p>
        </div>
      </div>
    </div>
  </section>