← Back to Home

Example 1: Basic Web Component

Learn how to create a simple custom element

Live Demo

This is a custom Web Component rendered below:

JavaScript Code

// Define a custom element class
class SimpleGreeting extends HTMLElement {
  connectedCallback() {
    // Get the 'name' attribute
    const name = this.getAttribute('name') || 'Guest';
    
    // Set the innerHTML
    this.innerHTML = `
      <div style="
        padding: 20px;
        border: 2px solid #2d1b69;
        border-radius: 0;
        margin: 10px 0;
        background: #f5f0e8;
      ">
        <h3 style="margin: 0 0 10px 0; color: #2d1b69;">
          👋 Hello, \${name}!
        </h3>
        <p style="margin: 0; color: #6b6b6b;">
          Welcome to Vanativ Components
        </p>
      </div>
    `;
  }
}

// Register the custom element
customElements.define('simple-greeting', SimpleGreeting);

HTML Usage

<!-- Use the component with different names -->
<simple-greeting name="Developer"></simple-greeting>
<simple-greeting name="World"></simple-greeting>

Key Concepts

Try it yourself:

Open the browser console and type:

document.createElement('simple-greeting').setAttribute('name', 'Your Name');
document.body.appendChild(document.createElement('simple-greeting'));

Documentation

Next Step