In modern web applications, managing and reusing UI components is a continuous challenge for developers. While JavaScript frameworks offer solutions, sharing components across different frameworks or completely independently is often difficult. This is where Web Components come in. This set of browser-native standards allows us to create truly modular, encapsulated, and framework-independent UI components.

Custom Elements: Create Your Own HTML Tags

Custom Elements, forming the foundation of Web Components, allow you to define your own HTML tags. This enables you to create project-specific, meaningful tags (e.g., <my-card>) instead of existing tags like <button> or <div>. To create a Custom Element, you extend the <code>HTMLElement</code> class and register it with the <code>customElements.define()</code> method.

class MyCard extends HTMLElement {
  constructor() {
    super(); // Always call super() first in constructor
    this.innerHTML = `
      <style>
        .card {
          border: 1px solid #ccc;
          padding: 16px;
          border-radius: 8px;
          box-shadow: 2px 2px 8px rgba(0,0,0,0.1);
        }
        h3 {
          color: #333;
        }
      </style>
      <div class="card">
        <h3>Title</h3>
        <p>This is a card component.</p>
      </div>
    `;
  }
}

customElements.define('my-card', MyCard);

After adding this code to your HTML file, you can use your component on your page with the <code><my-card></my-card></code> tag.

Shadow DOM: Encapsulation with Component Isolation

Custom Elements are the first step to creating a component. However, to prevent style and behavior conflicts, we need encapsulation. This is where Shadow DOM comes in. Shadow DOM creates a hidden DOM tree that isolates your component's internal structure and styles from the main document. Thus, CSS rules inside your component do not leak out, and external CSS rules do not affect your component's internals.

class MyShadowCard extends HTMLElement {
  constructor() {
    super();
    const shadowRoot = this.attachShadow({ mode: 'open' }); // Attach a shadow root
    shadowRoot.innerHTML = `
      <style>
        .card {
          border: 1px solid #007bff; /* Different border color */
          padding: 20px;
          border-radius: 10px;
          box-shadow: 3px 3px 10px rgba(0,123,255,0.2);
          font-family: Arial, sans-serif;
          background-color: #e9f5ff;
        }
        h3 {
          color: #0056b3;
          margin-top: 0;
        }
        p {
          color: #444;
          line-height: 1.6;
        }
      </style>
      <div class="card">
        <h3>Shadow DOM Card</h3>
        <p>The styles of this card are fully encapsulated with Shadow DOM.</p>
      </div>
    `;
  }
}

customElements.define('my-shadow-card', MyShadowCard);

Now, when you use <code><my-shadow-card></my-shadow-card></code>, you will see that its internal style rules operate independently of the rest of the page. <code>mode: 'open'</code> means you can access the Shadow DOM with JavaScript; in <code>'closed'</code> mode, access is not possible.

Slots: Dynamic Content Distribution

But what if we want to insert dynamic content into our component from the outside? For example, if the card's title or content will be different for each use? This is where the HTML <code><slot></code> element comes in. Slots allow you to place content coming from outside the Shadow DOM into specific points within your component's shadow tree.

class MySlottedCard extends HTMLElement {
  constructor() {
    super();
    const shadowRoot = this.attachShadow({ mode: 'open' });
    shadowRoot.innerHTML = `
      <style>
        .card {
          border: 1px dashed #28a745; /* Different border style */
          padding: 15px;
          margin-bottom: 10px;
          border-radius: 5px;
          background-color: #f0fff4;
        }
        ::slotted(h3) { /* Styling content passed through slots */
          color: #218838;
          font-size: 1.5em;
        }
        ::slotted(p) {
          color: #333;
        }
      </style>
      <div class="card">
        <slot name="card-title"><h3>Default Title</h3></slot>
        <slot><p>Default Content.</p></slot>
        <footer><small>Built with Web Component.</small></footer>
      </div>
    `;
  }
}

customElements.define('my-slotted-card', MySlottedCard);

When using this component, you can place content according to slot names:

<my-slotted-card>
  <h3 slot="card-title">Custom Card Title</h3>
  <p>This card's content comes from outside.</p>
  <p>Thanks to slots, we have a flexible structure.</p>
</my-slotted-card>

<my-slotted-card>
  <h3 slot="card-title">A Different Title</h3>
  <p>Can be used with just a paragraph.</p>
</my-slotted-card>

<my-slotted-card>
  <!-- Use only default content -->
</my-slotted-card>

<code><slot></code> tags can be named using the <code>name</code> attribute. An unnamed <code><slot></code> (default slot) captures all content not assigned to named slots. You can also add default content inside a <code><slot></code> to specify what to display when nothing is provided from outside.

Advanced Usage and Best Practices

• Lifecycle Callbacks: Custom Elements have lifecycle methods. For example, <code>connectedCallback()</code> runs when the component is added to the DOM, and <code>disconnectedCallback()</code> runs when it is removed. Example:

  
  class MyLifecycleElement extends HTMLElement {
    connectedCallback() {
      console.log('Component added to DOM.');
      // Event listeners can be added here.
    }
  
    disconnectedCallback() {
      console.log('Component removed from DOM.');
      // Event listeners can be cleaned up here.
    }
  }
  customElements.define('my-lifecycle-element', MyLifecycleElement);
  

• Attributes vs. Properties: HTML attributes are string values and are reflected in the DOM. JavaScript properties can be of any type and are held directly on the element object. To listen for attribute changes, you can use <code>static get observedAttributes()</code> and the <code>attributeChangedCallback(name, oldValue, newValue)</code> methods.
• Styling Web Components: Styles within Shadow DOM are encapsulated and cannot be directly accessed from outside. However, <code>::part()</code> CSS selectors can be used to style specific internal elements from the outside. You can also pass style parameters from outside the component using <code>CSS Custom Properties (CSS Variables)</code>.

Conclusion

Web Components, with Custom Elements, Shadow DOM, and Slots, offer a powerful standard in modern web development. Thanks to encapsulation, reusability, and framework independence, they enable you to build more sustainable, performant, and interoperable web applications. Especially in large projects or situations where multiple projects need to use the same UI components, Web Components become an indispensable tool. Learning this technology will take your frontend architecture to the next level.