Shadow Dom: Encapsulation مؤلفه وب Master برای برنامه های مدرن JavaScript

// Creating a basic shadow DOM
class SimpleComponent extends HTMLElement {
  constructor() {
    super();
    // Create a shadow root
    const shadow = this.attachShadow({mode: 'open'});

    // Create element
    const wrapper = document.createElement('div');
    wrapper.textContent = 'This content is encapsulated';

    // Add to shadow DOM
    shadow.appendChild(wrapper);
  }
}

// Register the custom element
customElements.define('simple-component', SimpleComponent);

// DOM isolation example
class IsolatedComponent extends HTMLElement {
  constructor() {
    super();

    // Create shadow root with open mode
    const shadow = this.attachShadow({mode: 'open'});

    // Create internal structure
    shadow.innerHTML = `
      

        
        

          
This content is isolated from the main document
        
      
    `;

    // These selectors won't conflict with the main document
    const header = shadow.querySelector('#header');
    header.style.color = 'blue';
  }
}

customElements.define('isolated-component', IsolatedComponent);

class StyledComponent extends HTMLElement {
  constructor() {
    super();
    const shadow = this.attachShadow({mode: 'open'});

    // Styles only apply within this component
    shadow.innerHTML = `
      
      
This paragraph has encapsulated styles
    `;
  }
}

customElements.define('styled-component', StyledComponent);

class ThemableComponent extends HTMLElement {
  constructor() {
    super();
    const shadow = this.attachShadow({mode: 'open'});

    shadow.innerHTML = `
      
      
    `;
  }
}

customElements.define('themable-component', ThemableComponent);

// Usage with custom properties
/*

Customized content
*/

class EventComponent extends HTMLElement {
  constructor() {
    super();
    const shadow = this.attachShadow({mode: 'open'});

    shadow.innerHTML = `
      Click Me
      
    `;

    // Internal event handling
    const button = shadow.getElementById('internal-button');
    const result = shadow.getElementById('result');

    button.addEventListener('click', (e) => {
      result.textContent = 'Button was clicked!';

      // Custom event that crosses shadow boundary
      const customEvent = new CustomEvent('button-clicked', {
        bubbles: true,
        composed: true, // Allows event to cross shadow boundary
        detail: { time: new Date() }
      });
      this.dispatchEvent(customEvent);
    });
  }
}

customElements.define('event-component', EventComponent);

// Usage
/*
document.querySelector('event-component')
  .addEventListener('button-clicked', (e) => {
    console.log('External handler caught event:', e.detail.time);
  });
*/

class CardComponent extends HTMLElement {
  constructor() {
    super();
    const shadow = this.attachShadow({mode: 'open'});

    shadow.innerHTML = `
      
      
    `;

    // Detect when slotted content changes
    const slots = shadow.querySelectorAll('slot');
    slots.forEach(slot => {
      slot.addEventListener('slotchange', (e) => {
        console.log(`Content in ${slot.name || 'default'} slot changed`);
      });
    });
  }
}

customElements.define('card-component', CardComponent);

// Usage
/*

  
Custom Header
  
This goes in the default slot
  
Custom Footer

*/

class MediaCard extends HTMLElement {
  constructor() {
    super();
    const shadow = this.attachShadow({mode: 'open'});

    shadow.innerHTML = `
      
      
    `;

    // Access nodes assigned to a slot
    setTimeout(() => {
      const titleSlot = shadow.querySelector('slot[name="title"]');
      const assignedElements = titleSlot.assignedNodes({flatten: true});
      console.log('Elements in title slot:', assignedElements);
    }, 0);
  }
}

customElements.define('media-card', MediaCard);

// Define a template in the HTML
/*

*/

class UserCard extends HTMLElement {
  constructor() {
    super();
    const shadow = this.attachShadow({mode: 'open'});

    // Clone the template content
    const template = document.getElementById('user-card-template');
    const clone = template.content.cloneNode(true);

    // Fill with data from attributes
    const avatar = clone.querySelector('.avatar');
    avatar.src = this.getAttribute('avatar') || 'default-avatar.png';

    const name = clone.querySelector('.name');
    name.textContent = this.getAttribute('name') || 'Unknown User';

    const role = clone.querySelector('.role');
    role.textContent = this.getAttribute('role') || 'User';

    shadow.appendChild(clone);
  }
}

customElements.define('user-card', UserCard);

class ProgressBar extends HTMLElement {
  constructor() {
    super();
    const shadow = this.attachShadow({mode: 'open'});

    shadow.innerHTML = `
      
      
    `;

    this._bar = shadow.querySelector('.bar');
  }

  static get observedAttributes() {
    return ['progress'];
  }

  attributeChangedCallback(name, oldValue, newValue) {
    if (name === 'progress') {
      const progress = parseInt(newValue) || 0;
      this._bar.style.width = `${Math.min(100, Math.max(0, progress))}%`;
    }
  }
}

customElements.define('progress-bar', ProgressBar);

// Usage with part styling
/*


*/

// A reusable button component
class FancyButton extends HTMLElement {
  constructor() {
    super();
    const shadow = this.attachShadow({mode: 'open'});

    shadow.innerHTML = `
      
      
    `;

    this._button = shadow.querySelector('button');
    this._button.addEventListener('click', e => {
      this.dispatchEvent(new CustomEvent('fancy-click', {
        bubbles: true,
        composed: true
      }));
    });
  }
}

// A dialog component that uses the button component
class FancyDialog extends HTMLElement {
  constructor() {
    super();
    const shadow = this.attachShadow({mode: 'open'});

    shadow.innerHTML = `
      
      
    `;

    // Set up event listeners
    const cancelBtn = shadow.getElementById('cancel');
    const confirmBtn = shadow.getElementById('confirm');

    cancelBtn.addEventListener('fancy-click', () => {
      this.close();
      this.dispatchEvent(new CustomEvent('dialog-cancel', {
        bubbles: true,
        composed: true
      }));
    });

    confirmBtn.addEventListener('fancy-click', () => {
      this.close();
      this.dispatchEvent(new CustomEvent('dialog-confirm', {
        bubbles: true,
        composed: true
      }));
    });
  }

  // Public API
  open() {
    this.setAttribute('open', '');
  }

  close() {
    this.removeAttribute('open');
  }
}

customElements.define('fancy-button', FancyButton);
customElements.define('fancy-dialog', FancyDialog);

// Efficient approach for list rendering
class PerformantList extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({mode: 'open'});

    // Create the base structure once
    this.shadowRoot.innerHTML = `
      
      
    `;

    this._listElement = this.shadowRoot.querySelector('ul');
  }

  set items(data) {
    // Clear existing items
    while (this._listElement.firstChild) {
      this._listElement.removeChild(this._listElement.firstChild);
    }

    // Create a document fragment for better performance
    const fragment = document.createDocumentFragment();

    // Add new items
    data.forEach(item => {
      const li = document.createElement('li');

      // Create individual shadow roots only if necessary
      if (this.getAttribute('use-shadow') === 'true') {
        const shadow = li.attachShadow({mode: 'open'});
        shadow.innerHTML = `
          
          
${item.text}
        `;
      } else {
        // Simple approach for better performance
        li.textContent = item.text;
        li.style.cssText = 'display: block; padding: 8px 16px; border-bottom: 1px solid #eee;';
      }

      fragment.appendChild(li);
    });

    this._listElement.appendChild(fragment);
  }
}

customElements.define('performant-list', PerformantList);

class DebuggableComponent extends HTMLElement {
  constructor() {
    super();
    const shadow = this.attachShadow({mode: 'open'});

    shadow.innerHTML = `
      
    `;

    // Development mode detection
    if (localStorage.getItem('devMode') === 'true') {
      this._setupDebugMode(shadow);
    }
  }

  _setupDebugMode(shadow) {
    // Add debug styles
    const style = document.createElement('style');
    style.textContent = `
      .container {
        position: relative;
        border: 2px dashed red;
        padding: 8px;
      }
      .debug-panel {
        position: absolute;
        bottom: 100%;
        right: 0;
        background: #f0f0f0;
        border: 1px solid #ccc;
        padding: 4px;
        font-size: 12px;
        z-index: 999;
      }
    `;
    shadow.appendChild(style);

    // Add debug panel
    const debugPanel = document.createElement('div');
    debugPanel.classList.add('debug-panel');
    debugPanel.textContent = this.tagName.toLowerCase();
    shadow.querySelector('.container').appendChild(debugPanel);

    // Log events
    this.addEventListener('click', e => {
      console.log('Component clicked:', this);
      console.log('Shadow root:', this.shadowRoot);
      console.log('Event path:', e.composedPath());
    });
  }
}

customElements.define('debuggable-component', DebuggableComponent);

// Feature detection and polyfill loading
(function() {
  // Check if Shadow DOM is supported
  if (!('attachShadow' in Element.prototype)) {
    console.log('Shadow DOM not supported - loading polyfill');

    // Load the polyfill
    const script = document.createElement('script');
    script.src = 'https://unpkg.com/@webcomponents/webcomponentsjs/webcomponents-bundle.js';
    script.onload = () => {
      console.log('Polyfill loaded, initializing components');
      initializeComponents();
    };
    document.head.appendChild(script);
  } else {
    initializeComponents();
  }

  function initializeComponents() {
    // Initialize your components here after ensuring Shadow DOM support
    // ...
  }
})();