HTML5 Web Components, Shadow DOM & Custom Elements

Standard Web Component Architecture

class TutorialBadge extends HTMLElement {
    constructor() {
        super();
        const shadow = this.attachShadow({ mode: 'open' });
        shadow.innerHTML = `
            <style>
                .badge { padding: 4px 10px; border-radius: 9999px; font-weight: bold; font-size: 11px; background: #10b981; color: #fff; }
            </style>
            <span class="badge">100% FREE ACCESS</span>
        `;
    }
}
customElements.define('free-badge', TutorialBadge);