Newline Pending Merge

    @lit-labs/scoped-registry-mixin
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.1 • Public • Published

    @lit-labs/scoped-registry-mixin

    ScopedRegistryHost mixin for LitElement that integrates with the speculative Scoped CustomElementRegistry polyfill.

    🚨 Warning: Scoped Custom Element Registries is a proposed browser API. It has not been finalized nor shipped in any browser. This mixin is provided to evaluate the proposal and facilitate feedback. Use this feature, and the polyfill in production code at your own risk.

    Overview

    The Scoped Custom Element Registries WICG proposal introduces new APIs for scoping custom element definitions to shadow roots, such that the mapping of tag names to custom element class doesn't rely on a single global registry.

    When new elements are created within a shadow root with a scoped custom element registry, the browser will use the scoped registry rather than the global registry to look up custom element definitions. When using a scoped element registry, all used custom element elements must be defined within that scope.

    ScopedRegistryHost adds the following features to LitElement:

    1. Automatically creates a scoped CustomElementRegistry for the class
    2. Provides sugar for defining custom elements in the scoped registry
    3. Passes the registry to attachShadow() to enable scoping
    4. Passes the shadow root to lit-html to create DOM within the scope

    A speculative Scoped CustomElementRegistry polyfill is being developed. Because the proposal is not implemented natively, ScopedRegistryHost requires the polyfill.

    Usage

    The mixin adds a declarative static elementDefinitions property for declaring the custom elements to be scoped locally to its Shadow DOM.

    Basic usage is as follows:

    import {LitElement, html} from 'lit';
    import {ScopedRegistryHost} from '@lit-labs/scoped-registry-mixin';
    
    import {SimpleGreeting} from './simple-greeting.js';
    
    class ScopedComponent extends ScopedRegistryHost(LitElement) {
      // Elements here will be registered against the tag names provided only
      // in the shadow root for this element
      static elementDefinitions = {
        'simple-greeting': SimpleGreeting,
      };
    
      render() {
        return html` <simple-greeting
          id="greeting"
          name="scoped world"
        ></simple-greeting>`;
      }
    }

    Contributing

    Please see CONTRIBUTING.md.

    Keywords

    none

    Install

    npm i @lit-labs/scoped-registry-mixin

    Homepage

    lit.dev/

    DownloadsWeekly Downloads

    633

    Version

    1.0.1

    License

    BSD-3-Clause

    Unpacked Size

    17.3 kB

    Total Files

    11

    Last publish

    Collaborators

    • lit-robot
    • graysnorton
    • sorvell
    • aomarks
    • justinfagnani
    • kevinpschaaf
    • jbingham
    • graynorton
    • rictic