Web Components Cheat Sheet

This lesson explains Web Components Cheat Sheet with clear examples, use cases, and best practices so you can build reusable Web Components confidently.

Web Components Cheatsheet Overview

This Web Components cheatsheet gives a quick category-based reference for Custom Elements, Shadow DOM, slots, templates, lifecycle callbacks, custom events, CSS Custom Properties, CSS Parts, accessibility, testing, and best practices.

Web Components Cheatsheet by Category

1. Custom Elements

Use: Create custom HTML tags.

class AppCard extends HTMLElement {
  connectedCallback() {
    this.innerHTML = "<p>Hello Component</p>";
  }
}

customElements.define("app-card", AppCard);

2. Custom Element Naming

Rule: Custom element names must contain a hyphen.

<app-card></app-card>
<user-profile></user-profile>
<site-header></site-header>

3. Define Element Safely

Use: Avoid duplicate definition errors.

if (!customElements.get("app-card")) {
  customElements.define("app-card", AppCard);
}

4. Lifecycle Callbacks

Use: Run setup, cleanup, and attribute updates.

connectedCallback() {
  this.render();
}

disconnectedCallback() {
  this.cleanup();
}

attributeChangedCallback(name, oldValue, newValue) {
  this.render();
}

5. Observed Attributes

Use: Watch specific attributes for changes.

static get observedAttributes() {
  return ["open", "value", "disabled"];
}

6. Shadow DOM

Use: Encapsulate markup and styles.

this.attachShadow({ mode: "open" });

this.shadowRoot.innerHTML = `
  <style>
    p { color: #0d6efd; }
  </style>

  <p>Inside Shadow DOM</p>
`;

7. Open vs Closed Shadow DOM

Use: Prefer open for testing and debugging.

this.attachShadow({ mode: "open" });

console.log(element.shadowRoot);

8. Slots

Use: Render external content inside Shadow DOM.

this.shadowRoot.innerHTML = `
  <article>
    <slot>Default content</slot>
  </article>
`;

9. Named Slots

Use: Place external content into specific areas.

<profile-card>
  <span slot="title">John Doe</span>
  <p>Frontend Developer</p>
</profile-card>

10. Template Element

Use: Store reusable markup before rendering.

const template = document.createElement("template");

template.innerHTML = `
  <style>
    .card { padding: 1rem; }
  </style>

  <article class="card">
    <slot></slot>
  </article>
`;

11. Clone Template

Use: Reuse template content safely.

this.shadowRoot.appendChild(
  template.content.cloneNode(true)
);

12. Declarative Shadow DOM

Use: Create Shadow DOM directly in HTML.

<user-card>
  <template shadowrootmode="open">
    <style>
      .card { border: 1px solid #dee2e6; }
    </style>

    <article class="card">
      <slot></slot>
    </article>
  </template>
</user-card>

13. CSS Custom Properties

Use: Theme components from outside Shadow DOM.

button {
  background: var(--button-bg, #0d6efd);
  color: var(--button-color, white);
}

14. CSS Parts

Use: Expose internal elements for external styling.

<button part="button">
  <slot>Button</slot>
</button>

15. ::part()

Use: Style exposed Shadow DOM parts.

app-button::part(button) {
  background: #198754;
  border-radius: 0.5rem;
}

16. ::slotted()

Use: Style direct slotted elements.

::slotted(h2) {
  color: #0d6efd;
}

17. Custom Events

Use: Communicate from component to parent code.

this.dispatchEvent(new CustomEvent("item-selected", {
  detail: { id: 101 },
  bubbles: true,
  composed: true
}));

18. Event Listener

Use: Listen to component events from outside.

document.addEventListener("item-selected", function(event) {
  console.log(event.detail.id);
});

19. Cleanup

Use: Prevent memory leaks.

connectedCallback() {
  window.addEventListener("resize", this.handleResize);
}

disconnectedCallback() {
  window.removeEventListener("resize", this.handleResize);
}

20. Accessibility

Use: Build components usable by everyone.

<button type="button" aria-expanded="false">
  Menu
</button>

Common Cheatsheet Reminders

Custom element names must include a hyphen.
Use customElements.get() before defining shared components.
Use disconnectedCallback() for cleanup.
Use composed: true for public events from Shadow DOM.
Use CSS Custom Properties and CSS Parts instead of exposing internal classes.

Key Takeaways

Web Components are built with Custom Elements, Shadow DOM, templates, and slots.
Lifecycle callbacks help manage setup, updates, and cleanup.
CSS Custom Properties and CSS Parts provide safe styling APIs.
Custom Events help components communicate with parent applications.
Accessible, documented, and tested Web Components are easier to reuse.

Pro Tip

Use this cheatsheet as a quick reference when building Web Components: define safely, clean up properly, expose styling hooks intentionally, and keep your public API stable.