Lesson 22: Advanced HTML5 Elements

<article>
  <h2>Project Timeline</h2>
  <p>The deadline is <time datetime="2023-12-31">December 31st</time>.</p>
  
  <details>
    <summary>View Requirements</summary>
    <p><mark>Important:</mark> All submissions must include documentation.</p>
    <ul>
      <li>Project proposal</li>
      <li>Source code</li>
      <li>User manual</li>
    </ul>
  </details>
  
  <p>Our product code is <data value="PRD-2023-001">Project Alpha</data>.</p>
</article>

<form oninput="result.value = range.value">
  <div class="form-group">
    <label for="browser">Choose browser:</label>
    <input list="browsers" id="browser">
    <datalist id="browsers">
      <option value="Chrome">
      <option value="Firefox">
      <option value="Safari">
      <option value="Edge">
      <option value="Opera">
    </datalist>
  </div>
  
  <div class="form-group">
    <label for="range">Volume:</label>
    <input type="range" id="range" min="0" max="100">
    <output name="result" for="range">50</output>
  </div>
  
  <div class="form-group">
    <label>Storage:</label>
    <meter min="0" max="100" value="65">65%</meter> 65%
  </div>
  
  <div class="form-group">
    <label>Upload Progress:</label>
    <progress id="progress" value="30" max="100"> 30% </progress>
  </div>
</form>

<!-- Define the template -->
<template id="user-card-template">
  <style>
    .card {
      border: 1px solid #ddd;
      border-radius: 8px;
      padding: 16px;
      max-width: 300px;
      font-family: Arial, sans-serif;
      box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    }
    .name {
      font-size: 1.2rem;
      font-weight: bold;
      margin-bottom: 8px;
    }
    .email {
      color: #666;
      font-size: 0.9rem;
    }
  </style>
  <div class="card">
    <div class="name"></div>
    <div class="email"></div>
  </div>
</template>

<script>
class UserCard extends HTMLElement {
  constructor() {
    super();
    const template = document.getElementById('user-card-template');
    const content = template.content.cloneNode(true);
    
    // Create shadow root
    this.attachShadow({ mode: 'open' }).appendChild(content);
    
    // Set content
    this.shadowRoot.querySelector('.name').textContent = 
      this.getAttribute('name');
    this.shadowRoot.querySelector('.email').textContent = 
      this.getAttribute('email');
  }
}

// Define the custom element
customElements.define('user-card', UserCard);
</script>

<!-- Use the component -->
<user-card name="John Doe" email="[email protected]"></user-card>