tessl/npm-lit-element

A simple base class for creating fast, lightweight web components

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Securityby

Pending

The risk profile of this skill

Overview

Eval results

Files

Polyfill Support

Name: tessl/npm-lit-element
Author: tessl

Polyfill support for browsers without native web components support, specifically providing ShadyCSS integration for CSS scoping and ShadyDOM patches. This ensures lit-element works correctly in older browsers that don't natively support Shadow DOM or CSS custom properties.

Capabilities

Polyfill Support Import

Import and configure polyfill support for browser compatibility.

/**
 * Import path for polyfill support module
 */
import "lit-element/polyfill-support.js";

Usage Examples:

// Import polyfill support before importing lit-element components
import "lit-element/polyfill-support.js";
import { LitElement, html, css } from "lit-element";

class PolyfillCompatibleElement extends LitElement {
  static styles = css`
    :host {
      display: block;
      background: var(--element-bg, white);
      color: var(--element-color, black);
    }
    
    .content {
      padding: 16px;
      border: 1px solid var(--border-color, #ccc);
    }
  `;

  render() {
    return html`
      <div class="content">
        <slot></slot>
      </div>
    `;
  }
}

customElements.define("polyfill-element", PolyfillCompatibleElement);

ShadyCSS Integration

Automatic integration with ShadyCSS polyfill for CSS custom properties and scoped styles.

/**
 * ShadyCSS polyfill integration (automatically configured)
 * Provides CSS custom property support and style scoping in polyfilled environments
 */

Features:

CSS Custom Properties: Enables CSS variables (var()) in browsers that don't support them natively
Style Scoping: Provides Shadow DOM style encapsulation using class-based scoping
Adoptable Stylesheets: Falls back to <style> tags when adoptedStyleSheets aren't available
Runtime Style Updates: Handles dynamic style changes in polyfilled environments

Usage Examples:

import "lit-element/polyfill-support.js";
import { LitElement, html, css } from "lit-element";

class ThemedElement extends LitElement {
  static styles = css`
    :host {
      --primary-color: #007bff;
      --secondary-color: #6c757d;
      
      display: block;
      padding: 16px;
    }

    .header {
      color: var(--primary-color);
      background: var(--header-bg, transparent);
      padding: 8px;
      border-bottom: 2px solid var(--primary-color);
    }

    .content {
      color: var(--text-color, #333);
      background: var(--content-bg, white);
      padding: 16px;
    }

    .button {
      background: var(--primary-color);
      color: white;
      border: none;
      padding: 8px 16px;
      border-radius: 4px;
      cursor: pointer;
    }

    .button:hover {
      background: var(--secondary-color);
    }
  `;

  render() {
    return html`
      <div class="header">
        <h2>Themed Component</h2>
      </div>
      <div class="content">
        <p>This component works with CSS custom properties in all browsers.</p>
        <button class="button">Styled Button</button>
      </div>
    `;
  }
}

// Set theme variables at document level
document.documentElement.style.setProperty('--primary-color', '#28a745');
document.documentElement.style.setProperty('--header-bg', '#f8f9fa');

ShadyDOM Integration

Automatic integration with ShadyDOM polyfill for Shadow DOM functionality.

/**
 * ShadyDOM polyfill integration (automatically configured)
 * Provides Shadow DOM functionality using light DOM with scoped selectors
 */

Features:

Shadow Root Emulation: Creates isolated DOM subtrees using class-based scoping
Slot Distribution: Implements <slot> functionality for content projection
Event Retargeting: Ensures events behave as expected in polyfilled Shadow DOM
CSS Selector Scoping: Automatically scopes CSS selectors to component boundaries

Usage Examples:

import "lit-element/polyfill-support.js";
import { LitElement, html, css } from "lit-element";

class SlottedElement extends LitElement {
  static styles = css`
    :host {
      display: block;
      border: 2px solid #ddd;
      padding: 16px;
    }

    .header {
      font-weight: bold;
      margin-bottom: 16px;
      padding: 8px;
      background: #f0f0f0;
    }

    .content {
      padding: 8px;
    }

    ::slotted(h3) {
      color: #007bff;
      margin: 0 0 8px 0;
    }

    ::slotted(.highlight) {
      background: yellow;
      padding: 4px;
    }
  `;

  render() {
    return html`
      <div class="header">
        <slot name="header">Default Header</slot>
      </div>
      <div class="content">
        <slot></slot>
      </div>
    `;
  }
}

customElements.define("slotted-element", SlottedElement);

// Usage with content projection:
// <slotted-element>
//   <h2 slot="header">Custom Header</h2>
//   <h3>Main Content Title</h3>
//   <p class="highlight">Highlighted paragraph</p>
// </slotted-element>

Browser Compatibility

Information about browser support and compatibility requirements.

/**
 * Browser compatibility information
 * Polyfill support enables lit-element to work in:
 * - Internet Explorer 11
 * - Legacy Edge (non-Chromium)
 * - Older versions of Chrome, Firefox, and Safari
 */

Supported Browsers:

Internet Explorer 11: Full support with polyfills
Legacy Edge: Complete compatibility
Chrome 54+: Native support (polyfills not needed)
Firefox 63+: Native support (polyfills not needed)
Safari 10.1+: Partial native support, polyfills improve compatibility

Polyfill Requirements:

For full compatibility in older browsers, also include:

<!-- Web Components polyfills -->
<script src="https://unpkg.com/@webcomponents/webcomponentsjs@^2/webcomponents-bundle.js"></script>

<!-- CSS Custom Properties polyfill (IE11) -->
<script src="https://unpkg.com/css-vars-ponyfill@^2"></script>

Usage Examples:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Polyfill Compatible App</title>
  
  <!-- Load polyfills first -->
  <script src="https://unpkg.com/@webcomponents/webcomponentsjs@^2/webcomponents-bundle.js"></script>
  
  <!-- Load lit-element polyfill support -->
  <script type="module">
    import 'lit-element/polyfill-support.js';
    import './my-components.js';
  </script>
</head>
<body>
  <my-app></my-app>
</body>
</html>

Performance Considerations

Tips for optimal performance when using polyfills.

/**
 * Performance considerations for polyfilled environments
 * - Minimize dynamic style changes
 * - Use static styles where possible
 * - Avoid deep CSS selector nesting
 * - Cache DOM queries
 */

Best Practices:

Static Styles: Define styles in static styles property rather than dynamically
Minimal DOM Manipulation: Reduce direct DOM queries and modifications
CSS Optimization: Use simple selectors and avoid complex CSS that's expensive to polyfill
Bundle Splitting: Load polyfills conditionally based on browser support

Usage Examples:

import "lit-element/polyfill-support.js";
import { LitElement, html, css } from "lit-element";

class OptimizedElement extends LitElement {
  // Use static styles for better polyfill performance
  static styles = css`
    :host {
      display: block;
    }
    
    /* Simple selectors work better with polyfills */
    .item {
      padding: 8px;
      margin: 4px 0;
    }
    
    .item-active {
      background: #e3f2fd;
    }
  `;

  items = ['Item 1', 'Item 2', 'Item 3'];
  activeIndex = 0;

  render() {
    return html`
      <div>
        ${this.items.map((item, index) => html`
          <div 
            class="item ${index === this.activeIndex ? 'item-active' : ''}"
            @click=${() => this.activeIndex = index}
          >
            ${item}
          </div>
        `)}
      </div>
    `;
  }
}