## 🔹 Modern Browser APIs
### 1. Web Components

class MyElement extends HTMLElement {
  connectedCallback() {
    this.innerHTML = `<h2>Custom Element</h2>`;
  }
}

customElements.define('my-element', MyElement);

### 2. Intersection Observer

const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      entry.target.classList.add('visible');
    }
  });
});

document.querySelectorAll('.animate').forEach(el => {
  observer.observe(el);
});

### 3. Web Storage

// Local Storage (persistent)
localStorage.setItem('theme', 'dark');
const theme = localStorage.getItem('theme');

// Session Storage (tab-specific)
sessionStorage.setItem('token', 'abc123');

---

## 🔹 Best Practices
1. Use ES modules for modern projects
2. Keep modules focused (single responsibility)
3. Configure tree-shaking to eliminate dead code
4. Use semantic versioning (^1.2.3 in package.json)
5. Set up pre-commit hooks (linting, formatting)

---

### 📌 What's Next?
In Part 7, we'll cover:
➡️ Object-Oriented JavaScript
➡️ Classes & Prototypes
➡️ Design Patterns

#JavaScript #ModernWeb #FrontendDevelopment 🚀

Practice Exercise:
1. Convert an existing script to ES modules
2. Create a Webpack config that bundles JS and CSS
3. Build a custom element with shadow DOM